:root {
    --scrollbar-size: 6px;
    --scrollbar-track: var(--surface-inset, #071226);
    --scrollbar-thumb: #2e5284;
    --scrollbar-hover: #457ac0;
    --scrollbar-active: #66a5ff;
}

:where(*) {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

@supports selector(::-webkit-scrollbar) {
    :where(*) {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

    ::-webkit-scrollbar {
        width: var(--scrollbar-size);
        height: var(--scrollbar-size);
    }

    ::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
        border-radius: 999px;
    }

    ::-webkit-scrollbar-thumb {
        min-width: 28px;
        min-height: 28px;
        border: 1px solid var(--scrollbar-track);
        border-radius: 999px;
        background: var(--scrollbar-thumb);
        background-clip: padding-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-hover);
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: var(--scrollbar-active);
    }

    ::-webkit-scrollbar-corner {
        background: var(--scrollbar-track);
    }

    ::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }
}

@media (forced-colors: active) {
    :where(*) {
        scrollbar-color: auto;
    }

    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
        background: Canvas;
    }

    ::-webkit-scrollbar-thumb {
        border-color: Canvas;
        background-color: CanvasText;
    }
}