/* Keep scrollable layouts stable and use one restrained scrollbar across the web UI. */
html {
    scrollbar-gutter: stable;
}

@media (hover: hover) and (pointer: fine) {
    html,
    body,
    body * {
        scrollbar-width: thin;
        scrollbar-color: #c4cad4 transparent;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    body *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track,
    body *::-webkit-scrollbar-track {
        background: transparent;
    }

    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb,
    body *::-webkit-scrollbar-thumb {
        min-width: 40px;
        min-height: 40px;
        border: 2px solid transparent;
        border-radius: 999px;
        background: #c4cad4;
        background-clip: padding-box;
    }

    html::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover,
    body *::-webkit-scrollbar-thumb:hover {
        background: #8b95a5;
        background-clip: padding-box;
    }
}