@import "variables.less";

.no-user-select {
    user-select: none;
}
.scrolly {
    display: block;
    overflow: hidden;
    // Well, it was a nice hack
    // visibility: hidden;

    > .area {
        position: relative;
        top: 0;
        display: block;
        overflow: auto;
        visibility: visible;
        z-index: @scroll-z-index;
    }

    & + .bar {
        background: @scroll-bar-bg;
        border: 0;
        display: block;
        position: relative;
        float: left;
        left: 0;
        margin-left: -@scroll-bar-width;
        opacity: @scroll-bar-opacity;
        width: @scroll-bar-width;
        visibility: hidden;
        z-index: @scroll-z-index + 1;

        > .thumb {
            position: absolute;
            top: 0;
            right: @scroll-bar-padding;

            background: @scroll-bar-thumb;
            border-radius: @scroll-bar-width / 2 - @scroll-bar-padding;
            width: @scroll-bar-width - (@scroll-bar-padding * 2);
            height: @scroll-bar-width;
        }

        &, & > .thumb {
            cursor: default;
            .no-user-select;
        }
        &.on-drag,
        &:hover {
            border-left: 1px solid @scroll-bar-active-border;
            opacity: @scroll-bar-opacity-active;
            margin-left: -(@scroll-bar-width-hover + 1);
            width: @scroll-bar-width-hover;

            > .thumb {
                border-radius: @scroll-bar-width-hover / 2 - @scroll-bar-padding;
                width: @scroll-bar-width-hover - (@scroll-bar-padding * 2);
            }
        }
    }
    &:hover + .bar,
    & + .bar.on-drag,
    & + .bar:hover {
        background: @scroll-bar-bg-active;
    }
}