/* Jednotné posuvníky pre celý web. Farby sa automaticky prispôsobia téme. */
:root {
    --scrollbar-size: 7px;
    --scrollbar-track: #eef2f6;
    --scrollbar-thumb: #b08042;
    --scrollbar-thumb-hover: #906634;
}

html.dark-mode,
body.dark-mode,
html:has(body.dark-mode) {
    --scrollbar-track: #0b0f19;
    --scrollbar-thumb: #2b3442;
    --scrollbar-thumb-hover: #465266;
}

html,
body,
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

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

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

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

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

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

/* Bočné navigácie majú zámerne jemnejší a užší posuvník. */
.sidebar-scroll-area {
    --scrollbar-track: transparent;
    --scrollbar-thumb: #b08042;
    --scrollbar-thumb-hover: #d4af37;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

html.dark-mode .sidebar-scroll-area,
body.dark-mode .sidebar-scroll-area {
    --scrollbar-thumb: #b08042;
    --scrollbar-thumb-hover: #d4af37;
}

.sidebar-scroll-area::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

.sidebar-scroll-area::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid var(--sidebar-bg, #0f172a);
    border-radius: 8px;
}

.sidebar-scroll-area::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

.sidebar-scroll-area::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}