From e016f4e812e23564a0616c07be62351475fec356 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 26 Jul 2026 10:28:19 +0530
Subject: [PATCH] fix: scrollbar color for firefox ^153

firefox 153 now support ::webkit-scrollbar but the support is not limited to width and display. it
broke the scrollbar background color for firefox.
---
 src/components/scroll/Scroll.css.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/scroll/Scroll.css.ts b/src/components/scroll/Scroll.css.ts
index 1f3d96b..4ab24cb 100644
--- a/src/components/scroll/Scroll.css.ts
+++ b/src/components/scroll/Scroll.css.ts
@@ -25,7 +25,7 @@ export const Scroll = recipe({
       overflow: "hidden",
 
       "@supports": {
-        "not selector(::-webkit-scrollbar)": {
+        "(-moz-appearance: none)": {
           scrollbarColor: "transparent transparent",
         },
       },
@@ -60,7 +60,7 @@ export const Scroll = recipe({
     visibility: {
       Always: {
         "@supports": {
-          "not selector(::-webkit-scrollbar)": {
+          "(-moz-appearance: none)": {
             scrollbarColor: `${ScrollThumbColor} ${ScrollTrackColor}`,
           },
         },
@@ -75,7 +75,7 @@ export const Scroll = recipe({
       },
       Hover: {
         "@supports": {
-          "not selector(::-webkit-scrollbar)": {
+          "(-moz-appearance: none)": {
             selectors: {
               "&:hover": {
                 scrollbarColor: `${ScrollThumbColor} ${ScrollTrackColor}`,
@@ -103,7 +103,7 @@ export const Scroll = recipe({
     size: {
       "0": {
         "@supports": {
-          "not selector(::-webkit-scrollbar)": {
+          "(-moz-appearance: none)": {
             scrollbarWidth: "none",
           },
         },
@@ -115,7 +115,7 @@ export const Scroll = recipe({
       },
       "300": {
         "@supports": {
-          "not selector(::-webkit-scrollbar)": {
+          "(-moz-appearance: none)": {
             scrollbarWidth: "thin",
           },
         },
@@ -132,7 +132,7 @@ export const Scroll = recipe({
       },
       "400": {
         "@supports": {
-          "not selector(::-webkit-scrollbar)": {
+          "(-moz-appearance: none)": {
             scrollbarWidth: "auto",
           },
         },