/* Thin scrollbars, site-wide.

   A 2px line takes almost no width, so content no longer shifts sideways the moment a page
   grows past one screen. scrollbar-gutter reserves that sliver whether or not a bar is
   showing, which removes the jump entirely. Applies to the page and to any scrollable box
   inside it - panels, tables, dropdowns, modals and forms. */

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .45) transparent;
}

html {
    scrollbar-gutter: stable;
}

::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, .45);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, .7);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Dark mode is set by a class on a wrapper element, so the thumb is keyed off that. */
.dark *,
[data-theme="dark"] * {
    scrollbar-color: rgba(82, 82, 82, .9) transparent;
}

.dark ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: rgba(82, 82, 82, .9);
}