Add global scrollbar styling

Addeding styling to the scroll bar so its not "out of place" from everything else. Open to changes to the style. Anything is better then what it was.

Maybe remove the hover color?

resources/styles/components/miscellaneous.css

@@ -27,3 +27,39 @@ code.clean {
         @apply .mt-4;
     }
 }
+
+::-webkit-scrollbar {
+    background: none;
+    width: 16px;
+    height: 16px;
+}
+
+ ::-webkit-scrollbar-thumb {
+     border: solid 0 rgb(0 0 0 / 0%);
+     border-right-width: 4px;
+     border-left-width: 4px;
+     -webkit-border-radius: 9px 4px;
+     -webkit-box-shadow: inset 0 0 0 1px hsl(211, 10%, 53%), inset 0 0 0 4px hsl(209deg 18% 30%);
+}
+
+ ::-webkit-scrollbar-track-piece {
+     margin: 4px 0;
+}
+
+ ::-webkit-scrollbar-thumb:horizontal {
+     border-right-width: 0;
+     border-left-width: 0;
+     border-top-width: 4px;
+     border-bottom-width: 4px;
+     -webkit-border-radius: 4px 9px;
+}
+
+ ::-webkit-scrollbar-thumb:hover {
+     -webkit-box-shadow:
+       inset 0 0 0 1px hsl(212, 92%, 43%),
+       inset 0 0 0 4px hsl(212, 92%, 43%);
+}
+
+ ::-webkit-scrollbar-corner {
+     background: transparent;
+}