/* Shared by full pages and their nested tables, panels, and dialogs. */
:root {
    color-scheme: light;
    --scrollbar-track: #f1f5f9;
    --scrollbar-thumb: #64748b;
    --scrollbar-thumb-hover: #475569;
}

[data-theme="dark"] {
    color-scheme: dark;
    --scrollbar-track: #1f2937;
    --scrollbar-thumb: #94a3b8;
    --scrollbar-thumb-hover: #cbd5e1;
}

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

/* Fallback for browsers using the WebKit scrollbar pseudo-elements. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 8px;
}

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

@media (forced-colors: active) {
    :root,
    [data-theme="dark"] {
        --scrollbar-track: Canvas;
        --scrollbar-thumb: ButtonText;
        --scrollbar-thumb-hover: Highlight;
    }

    * {
        scrollbar-color: auto !important;
    }
}