:root {
    --sb-size: 10px;
    --sb-track: rgba(255, 255, 255, 0.05);
    --sb-thumb: rgba(136, 204, 166, 0.45);
    --sb-thumb-hover: rgba(136, 204, 166, 0.68);
    --sb-thumb-active: rgba(136, 204, 166, 0.88);
}

@media (prefers-color-scheme: light) {
    :root {
        --sb-track: rgba(29, 30, 35, 0.07);
        --sb-thumb: rgba(29, 30, 35, 0.22);
        --sb-thumb-hover: rgba(29, 30, 35, 0.36);
        --sb-thumb-active: rgba(29, 30, 35, 0.5);
    }
}

body {
    --sb-track: rgba(255, 255, 255, 0.05);
    --sb-thumb: rgba(136, 204, 166, 0.45);
    --sb-thumb-hover: rgba(136, 204, 166, 0.68);
    --sb-thumb-active: rgba(136, 204, 166, 0.88);
}

.scrollbar--on-light {
    --sb-track: rgba(29, 30, 35, 0.08);
    --sb-thumb: rgba(29, 30, 35, 0.2);
    --sb-thumb-hover: rgba(29, 30, 35, 0.34);
    --sb-thumb-active: rgba(29, 30, 35, 0.48);
}

html {
    color-scheme: dark light;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
}

body {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: var(--sb-size);
    height: var(--sb-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: var(--sb-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background-color: var(--sb-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-hover);
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
    background-color: var(--sb-thumb-active);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    background: var(--sb-track);
}

.tag-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tag-container::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}