/**
 * Main page scrollbar (admin #panel-main and public html/body).
 * Nested widget scrollbars keep their own styles.
 */

:root {
    --page-scrollbar-size: 14px;
    --page-scrollbar-thumb: rgb(100 116 139 / 0.72);
    --page-scrollbar-thumb-hover: rgb(13 148 136 / 0.88);
    --page-scrollbar-track: rgb(241 245 249);
}

html.dark,
html[data-theme="dark"] {
    --page-scrollbar-thumb: rgb(148 163 184 / 0.58);
    --page-scrollbar-thumb-hover: rgb(45 212 191 / 0.75);
    --page-scrollbar-track: rgb(15 23 42);
}

html {
    scrollbar-width: auto;
    scrollbar-color: var(--page-scrollbar-thumb) var(--page-scrollbar-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#panel-main::-webkit-scrollbar {
    width: var(--page-scrollbar-size);
    height: var(--page-scrollbar-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#panel-main::-webkit-scrollbar-track {
    background: var(--page-scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#panel-main::-webkit-scrollbar-thumb {
    background-color: var(--page-scrollbar-thumb);
    border-radius: 999px;
    border: 3px solid var(--page-scrollbar-track);
    background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:active,
#panel-main::-webkit-scrollbar-thumb:hover,
#panel-main::-webkit-scrollbar-thumb:active {
    background-color: var(--page-scrollbar-thumb-hover);
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
#panel-main::-webkit-scrollbar-button,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
#panel-main::-webkit-scrollbar-corner {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}