Improved scrollbar

styles/base.scarlet

@@ -41,14 +41,3 @@ rt
 
 .spacer
 	flex 1
-@media (hover : hover) and (pointer : fine)
-	body
-		scrollbar-color text-color bg-color
-	::-webkit-scrollbar
-		width 8px
-	::-webkit-scrollbar-track
-		background var(--bg-color)
-		border-radius 20px
-	::-webkit-scrollbar-thumb
-		background var(--text-color)
-		border-radius 20px

styles/config.scarlet

@@ -42,6 +42,12 @@ ui-hover-border = 1px solid ui-hover-border-color
 ui-disabled-color = rgb(224, 224, 224)
 const ui-element-border-radius = 3px
 
+// Scrollbar
+scrollbar-size = 10px
+scrollbar-border-size = 2px
+scrollbar-thumb-color = hsla(text-color-h, text-color-s, text-color-l, 0.75)
+scrollbar-track-color = transparent
+
 // Input
 input-height = 2.5rem
 input-focus-border-color = rgb(248, 165, 130)

styles/scrollbar.scarlet

@@ -0,0 +1,17 @@
+// Desktop scrollbar
+@media (hover: hover) and (pointer: fine)
+	body
+		scrollbar-width scrollbar-size
+		scrollbar-color scrollbar-thumb-color scrollbar-track-color
+
+	::-webkit-scrollbar
+		width scrollbar-size
+
+	::-webkit-scrollbar-track
+		background-color scrollbar-track-color
+
+	::-webkit-scrollbar-thumb
+		border scrollbar-border-size solid transparent
+		border-radius 5px
+		background-clip content-box
+		background-color scrollbar-thumb-color