:root {
    --cubino-scrollbar-size: 8px;
    --cubino-scrollbar-size-thin: 6px;
    --cubino-scrollbar-track: rgba(20, 33, 61, 0.07);
    --cubino-scrollbar-thumb: rgba(8, 127, 122, 0.42);
    --cubino-scrollbar-thumb-hover: rgba(8, 127, 122, 0.68);
    --cubino-scrollbar-thumb-active: rgba(20, 33, 61, 0.52);
    --cubino-scrollbar-radius: 999px;
}

.cubino-app,
.cubino-access,
.cubino-vr-app {
    --cubino-scrollbar-track: rgba(20, 33, 61, 0.08);
    --cubino-scrollbar-thumb: rgba(8, 127, 122, 0.48);
    --cubino-scrollbar-thumb-hover: rgba(217, 149, 47, 0.72);
    --cubino-scrollbar-thumb-active: rgba(20, 33, 61, 0.58);
}

.cubino-app.cubino-theme-dark,
.cubino-vr-app.cubino-theme-dark {
    --cubino-scrollbar-track: rgba(255, 255, 255, 0.07);
    --cubino-scrollbar-thumb: rgba(8, 127, 122, 0.58);
    --cubino-scrollbar-thumb-hover: rgba(217, 149, 47, 0.78);
    --cubino-scrollbar-thumb-active: rgba(232, 111, 81, 0.72);
}

html {
    scrollbar-gutter: stable;
}

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

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

*::-webkit-scrollbar-track {
    background: var(--cubino-scrollbar-track);
    border-radius: var(--cubino-scrollbar-radius);
}

*::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--cubino-scrollbar-thumb) 88%, #ffffff 12%),
            var(--cubino-scrollbar-thumb-active)
        );
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: var(--cubino-scrollbar-radius);
    min-height: 2.5rem;
}

*::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--cubino-scrollbar-thumb-hover) 90%, #ffffff 10%),
            var(--cubino-scrollbar-thumb-active)
        );
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
    background: var(--cubino-scrollbar-thumb-active);
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

.app-scroll::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.select2-results__options::-webkit-scrollbar {
    width: var(--cubino-scrollbar-size-thin);
    height: var(--cubino-scrollbar-size-thin);
}

.simplebar-track.simplebar-vertical {
    inline-size: var(--cubino-scrollbar-size) !important;
    width: var(--cubino-scrollbar-size) !important;
}

.simplebar-track.simplebar-horizontal {
    block-size: var(--cubino-scrollbar-size) !important;
    height: var(--cubino-scrollbar-size) !important;
}

.simplebar-scrollbar::before {
    background:
        linear-gradient(
            180deg,
            var(--cubino-scrollbar-thumb),
            var(--cubino-scrollbar-thumb-active)
        ) !important;
    border-radius: var(--cubino-scrollbar-radius) !important;
    inset: 2px !important;
    opacity: 1 !important;
}

.simplebar-scrollbar.simplebar-visible::before {
    opacity: 1 !important;
}

.simplebar-scrollbar:hover::before {
    background:
        linear-gradient(
            180deg,
            var(--cubino-scrollbar-thumb-hover),
            var(--cubino-scrollbar-thumb-active)
        ) !important;
}

.simplebar-track {
    background: var(--cubino-scrollbar-track) !important;
    border-radius: var(--cubino-scrollbar-radius);
}