/* Shared viewport scrollbar. Component scrollbars keep their local styles. */
html {
    scrollbar-gutter: stable;
}

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

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    border-radius: 4px !important;
    background: #888 !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

html:not(.page-transition-active):not([data-theme="light"]):not(:has(body.theme-light))::-webkit-scrollbar-track,
html:not(.page-transition-active):has(body.theme-dark)::-webkit-scrollbar-track,
html:not(.page-transition-active):not([data-theme="light"]):not(:has(body.theme-light)) > body::-webkit-scrollbar-track,
html:not(.page-transition-active) > body.theme-dark::-webkit-scrollbar-track {
    background: #2C2C2C !important;
}

html:not(.page-transition-active):not([data-theme="light"]):not(:has(body.theme-light))::-webkit-scrollbar-thumb,
html:not(.page-transition-active):has(body.theme-dark)::-webkit-scrollbar-thumb,
html:not(.page-transition-active):not([data-theme="light"]):not(:has(body.theme-light)) > body::-webkit-scrollbar-thumb,
html:not(.page-transition-active) > body.theme-dark::-webkit-scrollbar-thumb {
    background: #5A5654 !important;
}

html:not(.page-transition-active):not([data-theme="light"]):not(:has(body.theme-light))::-webkit-scrollbar-thumb:hover,
html:not(.page-transition-active):has(body.theme-dark)::-webkit-scrollbar-thumb:hover,
html:not(.page-transition-active):not([data-theme="light"]):not(:has(body.theme-light)) > body::-webkit-scrollbar-thumb:hover,
html:not(.page-transition-active) > body.theme-dark::-webkit-scrollbar-thumb:hover {
    background: #746D69 !important;
}

html:not(.page-transition-active):not([data-theme="light"]):not(:has(body.theme-light))::-webkit-scrollbar-corner,
html:not(.page-transition-active):has(body.theme-dark)::-webkit-scrollbar-corner,
html:not(.page-transition-active):not([data-theme="light"]):not(:has(body.theme-light)) > body::-webkit-scrollbar-corner,
html:not(.page-transition-active) > body.theme-dark::-webkit-scrollbar-corner {
    background: #2C2C2C !important;
}

/* Keep the 8px viewport gutter stable while visually merging it into the overlay. */
html.page-transition-active::-webkit-scrollbar-track,
html.page-transition-active > body::-webkit-scrollbar-track {
    background: var(--page-transition-bg, transparent) !important;
}

html.page-transition-active::-webkit-scrollbar-thumb,
html.page-transition-active > body::-webkit-scrollbar-thumb {
    background: transparent !important;
}