From ed7ae59f2e91da8301072aa1d7b3889e6fd8c53e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20P=C3=A9rez=20=C3=81lvarez?=
 <alejperez99@gmail.com>
Date: Tue, 12 Mar 2024 17:31:28 +0100
Subject: [PATCH] Added scrollbar style when webkit-scrollbar is not supported

---
 src/layouts/Layout.astro | 49 ++++++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 5d156adc0..beb017582 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -80,28 +80,37 @@ scroll-behavior: smooth;
 				width: 1px;
 			}
 
-			::-webkit-scrollbar {
-				width: 10px;
-				border-radius: 10px;
+			@supports selector(::-webkit-scrollbar) {
+				::-webkit-scrollbar {
+					width: 10px;
+					border-radius: 10px;
+				}
+
+				::-webkit-scrollbar-thumb {
+					border-radius: 10px;
+					background-color: theme("colors.primary");
+					border: 2px solid transparent;
+					background-clip: content-box;
+				}
+
+				::-webkit-scrollbar-thumb:active {
+					background-color: #666;
+				}
+
+				::-webkit-scrollbar-track {
+					background: var(--background-image);
+				}
+
+				::-webkit-scrollbar-corner {
+					background: var(--background-image);
+				}
 			}
 
-			::-webkit-scrollbar-thumb {
-				border-radius: 10px;
-				background-color: theme("colors.primary");
-				border: 2px solid transparent;
-				background-clip: content-box;
-			}
-
-			::-webkit-scrollbar-thumb:active {
-				background-color: #666;
-			}
-
-			::-webkit-scrollbar-track {
-				background: var(--background-image);
-			}
-
-			::-webkit-scrollbar-corner {
-				background: var(--background-image);
+			@supports not selector(::-webkit-scrollbar) {
+				* {
+					scrollbar-color: theme("colors.primary") transparent;
+					scrollbar-width: thin;
+				}
 			}
 		</style>
 	</body>