fix(modal): add safari media query for overflow indicator (#8510)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/components/src/components/modal/_modal.scss

@@ -277,14 +277,24 @@
     left: 0;
     width: 100%;
     height: rem(32px);
-    // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to bottom, rgba($layer, 0), $layer);
+    background-image: linear-gradient(to bottom, transparent, $layer);
     content: '';
     grid-column: 1/-1;
     grid-row: 2/-2;
     pointer-events: none;
   }
 
+  // Safari-only media query
+  // won't appear correctly with CSS custom properties
+  // see: code snippet and tabs overflow indicators
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+      .#{$prefix}--modal-content--overflow-indicator {
+        background-image: linear-gradient(to bottom, rgba($layer, 0), $layer);
+      }
+    }
+  }
+
   .#{$prefix}--modal-content:focus
     ~ .#{$prefix}--modal-content--overflow-indicator {
     width: calc(100% - 4px);