// Scrollbar 
.scrollable {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        transition: .3s background;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: transparent;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

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

    &:hover::-webkit-scrollbar-thumb {
        background: $gray-400;
    }

    &.hover {
        overflow-y: hidden;

        >* {
            margin-top: -1px;
        }

        &:hover,
        &:focus,
        &:active {
            overflow: visible;
            overflow-y: auto;
        }
    }

    .touch & {
        overflow-y: auto !important;
    }
}

.scroll-x,
.scroll-y {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.scroll-y {
    overflow-y: auto;
}

.scroll-x {
    overflow-x: auto;
}

.no-scroll {
    overflow: hidden;
}