html,
body {
    scrollbar-width: thin;
    scrollbar-color: #800000 #f2f4f8;
}

html:has(body[data-theme="dark"]),
body[data-theme="dark"] {
    scrollbar-color: #47a3a3 #111827;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: #800000ff !important;
    border-radius: 10px !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: #222d32 !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    border-radius: 10px !important;
    box-shadow: inset 7px 10px 12px #ffffff !important;
    padding-bottom: 50px !important;
}

html:has(body[data-theme="dark"])::-webkit-scrollbar-thumb,
body[data-theme="dark"]::-webkit-scrollbar-thumb,
body[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: #47a3a3 !important;
}

html:has(body[data-theme="dark"])::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background: #2f6f6f !important;
}

html:has(body[data-theme="dark"])::-webkit-scrollbar-track,
body[data-theme="dark"]::-webkit-scrollbar-track,
body[data-theme="dark"] *::-webkit-scrollbar-track {
    box-shadow: inset 7px 10px 12px #111827 !important;
}

.hidden {
    display: none;
}