From 268275cee1919dad84b21d33227ee1f2e5f5803b Mon Sep 17 00:00:00 2001
From: Anya Wallace <anya.wallace@alleninstitute.org>
Date: Wed, 6 Nov 2024 16:14:19 -0800
Subject: [PATCH] Fix scrollbar for Safari and Chromium

---
 packages/core/styles/global.css | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/core/styles/global.css b/packages/core/styles/global.css
index 5b304a21..7161ea79 100644
--- a/packages/core/styles/global.css
+++ b/packages/core/styles/global.css
@@ -20,8 +20,30 @@ main {
     padding: 0;
     border: 0;
     overflow: hidden;
-    /* Unavailable on some versions of some browsers */
-    scrollbar-color:  var(--medium-grey) var(--accent-dark);
+}
+
+/* For browsers that support `scrollbar-*` properties */
+@supports (scrollbar-color: auto) {
+    html,
+    body,
+    main {
+        scrollbar-color: var(--medium-grey) var(--accent-dark);
+    }
+}
+/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
+@supports selector(::-webkit-scrollbar) {
+    body *::-webkit-scrollbar {
+        background-color: var(--accent-dark);
+        width: 12px;
+        height: 12px;
+    }
+    body *::-webkit-scrollbar-corner {
+        background-color: var(--accent-dark);
+    }
+    body *::-webkit-scrollbar-thumb {
+        background-color: var(--medium-grey);
+        border-radius: 8px
+    }
 }
 
 body {