/*
 * SpewIt website: very thin white/pearl gradient scrollbars.
 * Chrome, Edge, and other Chromium/WebKit browsers support the gradient rules.
 * Firefox supports a thin scrollbar with solid colors (no CSS scrollbar gradient).
 * This stylesheet is shared by every page through Views/Shared/_Layout.cshtml.
 * No overflow/scroll locking rules are changed here.
 */

/* Chromium, Edge, Chrome, Safari: 3px (half of the previous 6px width). */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 55%, #ededed 100%);
    border-radius: 12px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffffff 0%, #eeeeee 40%, #d2d2d2 100%);
    border: none;
    border-radius: 12px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffffff 0%, #dfdfdf 40%, #bcbcbc 100%);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    background: #ffffff;
}

/* Firefox: its native "thin" width is browser-defined, not precisely 3px; no gradient thumb. */
@supports (-moz-appearance: none) {
    html, body, * {
        scrollbar-width: thin;
        scrollbar-color: #d4d4d4 #fafafa;
    }
}