From c6182ab59c0bb54ce476b47a05f423fa77cc00d8 Mon Sep 17 00:00:00 2001
From: Quentin Macheda <69113642+QuentinMacheda@users.noreply.github.com>
Date: Fri, 3 May 2024 04:17:05 +0100
Subject: [PATCH] Customize scroll-bar style (#2857)

---
 uikit/src/main.scss               |  1 +
 uikit/src/scroll-area/styles.scss | 35 +++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/uikit/src/main.scss b/uikit/src/main.scss
index f3294e12e..4aa044034 100644
--- a/uikit/src/main.scss
+++ b/uikit/src/main.scss
@@ -45,6 +45,7 @@
   --border: 20 5.9% 90%;
   --input: 20 5.9% 90%;
   --ring: 20 14.3% 4.1%;
+  --scroll-bar: 60, 3%, 86%;
 
   .primary-blue {
     --primary: 221 83% 53%;
diff --git a/uikit/src/scroll-area/styles.scss b/uikit/src/scroll-area/styles.scss
index a6e1caf3a..3b076ffc2 100644
--- a/uikit/src/scroll-area/styles.scss
+++ b/uikit/src/scroll-area/styles.scss
@@ -21,3 +21,38 @@
     @apply bg-border relative z-50 w-[10px] rounded-full;
   }
 }
+
+// Customized scroll bar
+::-webkit-scrollbar {
+  width: 7px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--scroll-bar));
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: hsl(var(--background));
+}
+
+::-webkit-scrollbar-corner {
+  background-color: hsl(var(--background));
+}
+
+::-moz-scrollbar {
+  width: 7px;
+}
+
+::-moz-scrollbar-thumb {
+  background-color: hsl(var(--scroll-bar));
+  border-radius: 4px;
+}
+
+::-moz-scrollbar-track {
+  background-color: hsl(var(--background));
+}
+
+::-moz-scrollbar-corner {
+  background-color: hsl(var(--background));
+}