From aaf52bb956224ca7dca6bee803ec8009130bcec2 Mon Sep 17 00:00:00 2001
From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Date: Wed, 18 Sep 2024 15:14:28 -0500
Subject: [PATCH] [CL-448] Scrollbar Styles (#11111)

* add scrollbar styles to tailwind configuration

* scope scrollbar styles to the extension, not globally

* update background of scrollbar to be alt
---
 apps/browser/src/popup/scss/tailwind.css | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/apps/browser/src/popup/scss/tailwind.css b/apps/browser/src/popup/scss/tailwind.css
index 7e12c1d677..f465e0b77c 100644
--- a/apps/browser/src/popup/scss/tailwind.css
+++ b/apps/browser/src/popup/scss/tailwind.css
@@ -3,3 +3,26 @@
 @tailwind utilities;
 
 @import "../../../../../libs/components/src/tw-theme.css";
+
+@layer base {
+  /* Chrome & Safari support */
+  ::-webkit-scrollbar {
+    @apply tw-overflow-auto;
+  }
+  ::-webkit-scrollbar-thumb {
+    @apply tw-bg-secondary-500 tw-rounded-lg tw-border-4 tw-border-solid tw-border-transparent tw-bg-clip-content;
+  }
+  ::-webkit-scrollbar-track {
+    @apply tw-bg-background-alt;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    @apply tw-bg-secondary-600;
+  }
+
+  /* FireFox support */
+  * {
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgb(var(--color-secondary-500)) rgb(var(--color-background-alt));
+    }
+  }
+}