.scrollbar-button {
    background-color: #ffffff;
    border: 1px #ababab solid;
}

.scrollbar {
    position: relative;
    overflow: hidden;
}
.scrollbar-container {
    position: relative;
    overflow: hidden;
}

.scrollbar-v, .scrollbar-h {
    position: absolute;
    background: #f3f3f3;
}

.scrollbar-v {
    width: 15px;
    height: 100%;
    right: 0;
    top: 0;
}

.scrollbar-h {
    height: 15px;
    width: 100%;
    left: 0;
    bottom: 0;
}

.scrollbar-v-up, .scrollbar-v-down, .scrollbar-h-up, .scrollbar-h-down, .scrollbar-line-v-btn, .scrollbar-line-h-btn {
    cursor: pointer;
    position: absolute;
    .scrollbar-button;
}

.scrollbar-line-v-btn, .scrollbar-line-h-btn {
    &:hover {
        background-color: #f0f0f0;
    }
}

.scrollbar-v-up, .scrollbar-h-up  {
    width: 15px;
    height: 15px;
    left: 0;
    top: 0;
}

.scrollbar-v-down, .scrollbar-h-down {
    width: 15px;
    height: 15px;
    left: 0;
    bottom: 0;
}

.scrollbar-h-down {
    left: auto;
    right: 0;
}

.scrollbar-line-v, .scrollbar-line-h {
    position: absolute;
    z-index: 3;
}

.scrollbar-line-v {
    width: 100%;
    left: 0;
    top: 15px;
}

.scrollbar-line-h {
    height: 15px;
    left: 15px;
    top: 0;
}

.scrollbar-line-v-btn {
    width: 100%;
    left: 0 !important;
    top: 0;
}

.scrollbar-line-h-btn {
    height: 100%;
    left: 0;
    top: 0 !important;
}

.scrollbar-both {
    position: absolute;
    width: 15px;
    height: 15px;
    right: 0;
    bottom: 0;
}

.scrollbar-line-h, .scrollbar-line-v, .scrollbar-both {
    background-color: #f3f3f3;
}

.scrollbar-v-up, .scrollbar-v-down, .scrollbar-h-up, .scrollbar-h-down {
    &:before {
        position: absolute;
        content: "";
        font-family: @sysIconFontName;
        font-size: 14px;
    }
}

.scrollbar-v-up {
    &:before {
        content: "\e010";
    }
}

.scrollbar-v-down {
    &:before {
        content: "\e012";
    }
}

.scrollbar-h-up {
    &:before {
        content: "\e010";
        margin-top: -1px;
        .rotate(-90deg);
    }
}

.scrollbar-h-down {
    &:before {
        content: "\e010";
        margin-top: -1px;
        .rotate(90deg);
    }
}