.transf(@prop) {
    -webkit-transform: @prop;
    transform: @prop;
}

.stec-scroll-bar {
    opacity: 0;
    border-radius: 3px;
    position: absolute;
    left: initial !important;
    right: 1px;
    top: 0;
    width: 5px;
    background-color: rgba(0,0,0,0.1);
    z-index: 1001;
    -webkit-transition: width .1s ease-out, background-color .1s ease-out, transform .3s ease-out, opacity 0.3s ease-out;
    transition: width .1s ease-out, background-color .1s ease-out, transform .3s ease-out, opacity 0.3s ease-out;
    .transf(rotateX(90deg));
    overflow: visible;

    &:before {
        content: "";
        width: 30px;
        height: 100%;
        position: absolute;
        right:0;
        top:0;
    }

}

.stec-scroll-container {
    &.active {
        .stec-scroll-bar {
            opacity: 1;
            .transf(rotateX(0));
            &.ui-draggable-dragging,
            &:hover {
                cursor: default;
                background-color: rgba(0,0,0,0.3);
                width: 20px;
            }
        }
    }
}