.scrollbar {
    /* firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--bg-surface-hover) transparent;
    overflow: hidden;

}

.scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
}

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

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


.scrollbar__h {
    overflow-x: scroll;
}

.scrollbar__v {
    overflow-y: scroll;
}




.scrollbar--auto-hide {
    /* firefox */
    scrollbar-color: transparent transparent;
}

.scrollbar--auto-hide::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.scrollbar--auto-hide:hover {
    scrollbar-color: var(--bg-surface-hover) transparent;
}



/* invisible scrollbar but contain will scroll */
.scrollbar--invisible {
    /* firefox */
    scrollbar-color: transparent transparent;
}

.scrollbar--invisible::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.scrollbar--invisible:hover::-webkit-scrollbar-thumb {
    background-color: transparent;
}