From 10d3deff37121b8e925c9841c33f21c37e49d6df Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 23 Oct 2022 10:22:31 +0200
Subject: [PATCH] Formatted scrollbar in date picker for time component

---
 src/utils/DateInput.scss | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/utils/DateInput.scss b/src/utils/DateInput.scss
index ef3af934..bb795943 100644
--- a/src/utils/DateInput.scss
+++ b/src/utils/DateInput.scss
@@ -94,7 +94,20 @@
 }
 
 .react-datepicker__time-list.react-datepicker__time-list {
+  /* Forefox scrollbar */
+  scrollbar-color: rgba(0, 0, 0, 0.5) var(--secondary-color);
+  scrollbar-width: thin;
 
+  /* Chrome webkit scrollbar */
+  &::-webkit-scrollbar {
+    width: 10px;
+    background-color: var(--secondary-color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 0.5rem;
+  }
 }
 
 .react-datepicker-popper.react-datepicker-popper {