/* ************************************************** */
/* #region VARIABLES                                  */
/* ************************************************** */

:root {
    --overlay-scrollbar-track-width: 4px;
    --overlay-scrollbar-thumb-width: 4px;
    --overlay-scrollbar-thumb-min-width: 12px;
}

/* #endregion */

/* ************************************************** */
/* #region SCROLLBAR CONTAINER                        */
/* ************************************************** */

.overlay-scrollbar-container {
    display: none;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-delay: 0.5s;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    z-index: 9;
}
.overlay-scrollbar-container.vertical {
    flex-direction: row;
    position: absolute;
    top: 0;
    right: 0;
}
.overlay-scrollbar-container.horizontal {
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
}

.has-overlay-scrollbar {
    container-type: scroll-state;
    container-name: scroll-container;
}
@container scroll-container scroll-state(scrollable: inline) {
    .overlay-scrollbar-container.horizontal {
        display: flex;
    }
}
@container scroll-container scroll-state(scrollable: block) {
    .overlay-scrollbar-container.vertical {
        display: flex;
    }
}

/* show scrollbar when container is hovered */
.has-overlay-scrollbar:hover > .overlay-scrollbar-container {
    opacity: 1;
    transition-property: opacity;
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* #endregion */

/* ************************************************** */
/* #region SCROLLBAR TRACK                            */
/* ************************************************** */

.overlay-scrollbar-track {
    position: relative;
    background-color: transparent;
    pointer-events: auto;
    cursor: pointer;
}

/* vertical scrollbar positioning */
.overlay-scrollbar-container.vertical > .overlay-scrollbar-track {
    width: var(--overlay-scrollbar-track-width);
    height: 100%;
}

/* horizontal scrollbar positioning */
.overlay-scrollbar-container.horizontal > .overlay-scrollbar-track {
    width: 100%;
    height:var(--overlay-scrollbar-track-width);
}

/* #endregion */

/* ************************************************** */
/* #region SCROLLBAR THUMB                            */
/* ************************************************** */

.overlay-scrollbar-thumb {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    border-radius: 0;
    pointer-events: auto;
}
.overlay-scrollbar-thumb::after {
    content: "";
    background-color: var(--border-color);
    border-radius: 50vw;
    box-shadow: 0 0 0 var(--border-width) var(--bg-color);
}

.overlay-scrollbar-container.vertical > .overlay-scrollbar-track > .overlay-scrollbar-thumb {
    flex-direction: row;
    padding-block: 4px;
}

.overlay-scrollbar-container.horizontal > .overlay-scrollbar-track > .overlay-scrollbar-thumb {
    flex-direction: column;
    padding-inline: 4px;
}

.overlay-scrollbar-container.vertical > .overlay-scrollbar-track > .overlay-scrollbar-thumb::after {
    width: var(--overlay-scrollbar-thumb-width);
    height: 100%;
    transform: translate(-2px, 0px);
}

.overlay-scrollbar-container.horizontal > .overlay-scrollbar-track > .overlay-scrollbar-thumb::after {
    width:  100%;
    height: var(--overlay-scrollbar-thumb-width);
    transform: translate(0px, -2px);
}

.overlay-scrollbar-container.horizontal > .overlay-scrollbar-track:hover,
.overlay-scrollbar-container.horizontal > .overlay-scrollbar-track:active {
    cursor: ew-resize;
}

.overlay-scrollbar-container.vertical > .overlay-scrollbar-track:hover,
.overlay-scrollbar-container.vertical > .overlay-scrollbar-track:active {
    cursor: ns-resize;
}

/* vertical thumb sizing */
.overlay-scrollbar-container.vertical > .overlay-scrollbar-track > .overlay-scrollbar-thumb {
    width: 100%;
    min-height: var(--overlay-scrollbar-thumb-min-width);
}

/* horizontal thumb sizing */
.overlay-scrollbar-container.horizontal > .overlay-scrollbar-track > .overlay-scrollbar-thumb {
    height: 100%;
    min-width: var(--overlay-scrollbar-thumb-min-width);
}

/* #endregion */

/* ************************************************** */
/* #region SCROLLBAR DRAGGING                         */
/* ************************************************** */

/* don't hide scrollbar container when scrollbar thumb is being dragged */
.overlay-scrollbar-container:has(.overlay-scrollbar-thumb.dragging) {
    opacity: 1;
}

/* prevent text selection while dragging */
:has(.overlay-scrollbar-thumb.dragging) * {
    cursor: grabbing !important;
    pointer-events: none;
}

/* #endregion */