bl-scrollable {
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;

    &.block {
        display: block;
        height: 100%;

        .scrollable-container {
            height: 100%;
        }
    }

    .scrollable-container {
        flex: 1;
        display: block;
        // height: 100%;
        width: 100%;
        position: relative;
        transform: translate3d(0, 0, 0);
        z-index: 0;
        overflow: hidden;
        -webkit-overflow-scrolling: touch; /* Trigger native scrolling for mobile, if not supported, plugin is used. */

        .simplebar-content {
            transform: translate3d(0, 0, 0);
        }
    }

    .scrollable-container .simplebar-scroll-content {
        overflow: scroll;
        transform: translate3d(0, 0, 0);

        //Hide the default scrollbar
        &::-webkit-scrollbar {
            height: 0 !important;
            width: 0 !important;
        }
        position: relative;
        z-index: 0;
    }

    $hover-srollbar-width: 10px;
    $srollbar-width: 7px;

    .simplebar-track {
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 11px;

        &.dragging.vertical {
            .simplebar-scrollbar {
                width: $hover-srollbar-width;
            }
        }

        &.dragging.horizontal {
            .simplebar-scrollbar {
                height: $hover-srollbar-width;
            }
        }
    }

    .simplebar-track .simplebar-scrollbar {
        position: absolute;
        right: 2px;
        border-radius: 7px;
        min-height: 10px;
        width: $hover-srollbar-width;
        opacity: 0;
        transition: opacity 0.2s linear;
        background: $secondary-text;
        background-clip: padding-box;

        &:active {
            background-color: $primary-text;
        }
    }

    .simplebar-track:hover .simplebar-scrollbar {
        /* When hovered, remove all transitions from drag handle */
        opacity: 0.7;
        transition: opacity 0 linear;

        &:hover {
            width: $hover-srollbar-width;
        }
    }

    .simplebar-track .simplebar-scrollbar.visible {
        opacity: 0.7;
    }

    .simplebar-track.horizontal {
        top: auto;
        left: 0;
        width: auto;
        height: $hover-srollbar-width;

        .simplebar-scrollbar {
            right: auto;
            bottom: 2px;
            min-height: 0;
            min-width: 10px;
            width: auto;
            height: $hover-srollbar-width;

            &:hover {
                height: $hover-srollbar-width;
            }
        }
    }
}
