/* SCROLLBAR */

/* Useful when scrollbars is initialzed and destroyed (ex : tablet vertical horizontal) */
[data-overlayscrollbars-viewport=''] {
    overflow: initial;
}


.os-scrollbar {
    /* --os-size: 80px; */
    cursor: grab;
    /* cursor: s-resize; */
    /* cursor: grabbing; */
    /* outline: var(--outline); */
    padding: 0;
}

.os-scrollbar-track,
.os-scrollbar-track:hover {
    border-radius: 0;
}

.os-scrollbar-handle,
.os-scrollbar-handle:hover {
    background-color: transparent;
    border-radius: 0;
}

.os-scrollbar-handle::before {
    border-radius: 80px;
    /* outline: var(--outline); */
    z-index: -1;
    left: 0 !important;
    top: 0 !important;
    width: 100%;
}

.os-scrollbar-handle::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -2;
}


/* Scroll Y */

.os-scrollbar-vertical {
    --os-size: 0;
}

.os-scrollbar-vertical .os-scrollbar-track {
    background-color: var(--grey);
}

.os-scrollbar-vertical .os-scrollbar-handle::before {
    background-color: var(--blue);
}

.os-scrollbar-vertical .os-scrollbar-handle::after {
    background-color: var(--grey-l);
    height: 100vh;
    left: 0;
    top: 50%;
    width: 100%;
}


/* Scroll X */

.os-scrollbar-horizontal {
    --os-size: 80px;
    /* outline: var(--outline); */
    box-shadow: var(--box-shadow);
}

.os-scrollbar-horizontal .os-scrollbar-track {
    background-color: var(--black);
}

.os-scrollbar-horizontal .os-scrollbar-handle::before {
    background-color: var(--grey-l);
    /* outline: var(--outline); */
    box-shadow: var(--box-shadow);
}

.os-scrollbar-horizontal .os-scrollbar-handle::after {
    background-color: var(--grey);
    height: 100%;
    left: 50%;
    top: 0;
    width: 100vw;
}


@media screen and (min-width: 1024px) {

    /* .scrollbar-child[data-overlayscrollbars-viewport*=overflowYScroll] {
        padding-right: 80px !important;
    } */

    .hidden-scrollbar .os-scrollbar-vertical {
        box-shadow: none;
        --os-size: 0;
    }

    .hidden-scrollbar .os-scrollbar-vertical .os-scrollbar-handle::before {
        box-shadow: none;
    }

    .os-scrollbar-vertical {
        --os-size: 80px;
        /* outline: var(--outline); */
        box-shadow: var(--box-shadow);
    }

    .os-scrollbar-vertical .os-scrollbar-handle::before {
        /* outline: var(--outline); */
        box-shadow: var(--box-shadow);
    }

}