From d65250c341cffd5ed536b790cc305ce380b05ed3 Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Mon, 3 May 2021 19:59:30 -0700
Subject: [PATCH] fix(modal): add safari media query for overflow indicator
 (#8510)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../components/src/components/modal/_modal.scss    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
index 3c9bc540f79d..7d2f9d37d44c 100644
--- a/packages/components/src/components/modal/_modal.scss
+++ b/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);