/* Shared storefront scrollbars: native scrolling, scoped away from Admin. */
html[data-atelier-theme-root] {
    --store-scroll-thumb: #bbb6c8;
    --store-scroll-hover: #958ca9;
    --store-scroll-track: transparent;
}
html[data-atelier-theme-root].dark {
    --store-scroll-thumb: #51495f;
    --store-scroll-hover: #817091;
}
html[data-atelier-theme-root]::-webkit-scrollbar,
html[data-atelier-theme-root] *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html[data-atelier-theme-root]::-webkit-scrollbar-track,
html[data-atelier-theme-root] *::-webkit-scrollbar-track {
    background: var(--store-scroll-track);
}
html[data-atelier-theme-root]::-webkit-scrollbar-thumb,
html[data-atelier-theme-root] *::-webkit-scrollbar-thumb {
    background: var(--store-scroll-thumb);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    min-height: 28px;
}
html[data-atelier-theme-root]::-webkit-scrollbar-thumb:hover,
html[data-atelier-theme-root] *::-webkit-scrollbar-thumb:hover {
    background-color: var(--store-scroll-hover);
}
html[data-atelier-theme-root]::-webkit-scrollbar-button,
html[data-atelier-theme-root] *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}
html[data-atelier-theme-root]::-webkit-scrollbar-corner,
html[data-atelier-theme-root] *::-webkit-scrollbar-corner {
    background: transparent;
}
/* Firefox uses its native thin scrollbar API. */
@supports not selector(::-webkit-scrollbar) {
    html[data-atelier-theme-root], html[data-atelier-theme-root] * {
        scrollbar-width: thin;
        scrollbar-color: var(--store-scroll-thumb) var(--store-scroll-track);
    }
}
@media (forced-colors: active) {
    html[data-atelier-theme-root] {
        --store-scroll-thumb: ButtonText;
        --store-scroll-hover: Highlight;
    }
    html[data-atelier-theme-root], html[data-atelier-theme-root] * {
        scrollbar-color: auto;
    }
}