/* =============================================
   scrollbar.css (Scodezy base, gen3 1.0.65) - slim scrollbars everywhere, in the style of the left menu.
   The theme already styles scroll boxes (div / ul / pre ...); this adds the page itself (html / body) and text
   boxes, which kept the thick browser scrollbar. Loaded by includes/css.php (admin panel) and siteSigninHead()
   (sign-in pages).
   ============================================= */

:root {
    --site-scrollbar-size: 6px;                                 /* Thickness of the page scrollbar */
    --site-scrollbar-thumb: #c9cdd8;                            /* Handle */
    --site-scrollbar-thumb-hover: #9aa0b1;                      /* Handle under the mouse / while dragging */
}

/* Firefox (standard properties). Only there: in Chrome / Edge these would override the slimmer style below */
@supports ( -moz-appearance: none ) {
    html, textarea, select[multiple] {
        scrollbar-width: thin;
        scrollbar-color: var(--site-scrollbar-thumb) transparent;
    }
}

/* Chrome / Edge / Safari */
html::-webkit-scrollbar, body::-webkit-scrollbar, textarea::-webkit-scrollbar, select::-webkit-scrollbar {
    width: var(--site-scrollbar-size);
    height: var(--site-scrollbar-size);
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, select::-webkit-scrollbar-track {
    background-color: transparent;
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, select::-webkit-scrollbar-thumb {
    background-color: var(--site-scrollbar-thumb);
    border-radius: 10px;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active {
    background-color: var(--site-scrollbar-thumb-hover);
}
html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* Theme scroll boxes: rounded handles like the left menu */
div::-webkit-scrollbar-thumb, ul::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb, main::-webkit-scrollbar-thumb {
    border-radius: 10px;
}