//
// Scrollbar
// --------------------------------------------------

.drag-noselect {
    .user-select(none);
}

@scrollbar-thumb-size: 6px;

.control-scrollbar {
    position: relative;
    overflow: hidden;
    height: 100%;

    >.scrollbar-scrollbar {
        position: absolute;
        z-index: 100;
        .scrollbar-track {
            background-color: @color-scrollbar-track;
            position: relative;
            .border-radius(5px);

            .scrollbar-thumb {
                background-color: @color-scrollbar-thumb;
                .border-radius(5px);
                cursor: pointer;
                overflow: hidden;
                position: absolute;
            }
        }

        &.disabled {
            display: none !important;
        }
    }

    &.vertical {
        >.scrollbar-scrollbar {
            right: 0;
            margin-right: 5px;
            width: @scrollbar-thumb-size;
            .scrollbar-track {
                height: 100%;
                width: @scrollbar-thumb-size;
                .scrollbar-thumb {
                    height: 20px;
                    width: @scrollbar-thumb-size;
                    top: 0;
                    left: 0;
                }
            }

            &:active, &:hover {
                width: @scrollbar-thumb-size + 2px;
                .transition(width .3s);
                .scrollbar-track,
                .scrollbar-thumb {
                    width: @scrollbar-thumb-size + 2px;
                    .transition(width .3s);
                }
            }
        }
    }

    &.horizontal {
        >.scrollbar-scrollbar {
            margin: 0 0 5px;
            clear: both;
            height: @scrollbar-thumb-size;
            .scrollbar-track {
                width: 100%;
                height: @scrollbar-thumb-size;
                .scrollbar-thumb {
                    height: @scrollbar-thumb-size;
                    margin: 2px 0;
                    left: 0;
                    top: 0;
                }
            }

            &:active, &:hover {
                height: @scrollbar-thumb-size + 2px;
                .transition(height .3s);
                .scrollbar-track,
                .scrollbar-thumb {
                    height: @scrollbar-thumb-size + 2px;
                    .transition(height .3s);
                }
            }
        }
    }
}

html.mobile {
    .control-scrollbar {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.no-touch .control-scrollbar {
    >.scrollbar-scrollbar {
        opacity: 0;
        .transition(opacity 0.3s);
    }

    &:active >.scrollbar-scrollbar,
    &:hover >.scrollbar-scrollbar {opacity: 1;}
}

@media (max-width: @screen-sm) {
    &.responsive-sidebar {
        > .layout-cell:last-child {
            .control-scrollbar {
                overflow: visible;
                height: auto;

                .scrollbar-scrollbar {
                    display: none!important;
                }
            }
        }
    }
}