Scrollbars

src/app.css

@@ -1,4 +1,5 @@
 @import './styles/base.css';
+@import 'styles/scrollbar.css';
 @import './styles/publications.css';
 @import './styles/visualize.css';
 

src/styles/scrollbar.css

@@ -0,0 +1,21 @@
+@layer components {
+    /* Global scrollbar styles */
+    * {
+        scrollbar-width: thin; /* Firefox */
+        scrollbar-color: rgba(87, 66, 41, 0.8) transparent; /* Transparent track, default scrollbar thumb */
+    }
+
+    /* Webkit Browsers (Chrome, Safari, Edge) */
+    *::-webkit-scrollbar {
+        width: 8px; /* Thin scrollbar */
+    }
+
+    *::-webkit-scrollbar-track {
+        background: transparent; /* Fully transparent track */
+    }
+
+    *::-webkit-scrollbar-thumb {
+        @apply bg-primary-500 dark:bg-primary-600 hover:bg-primary-600 dark:hover:bg-primary-800;;
+        border-radius: 6px; /* Rounded scrollbar */
+    }
+}