@import "/UI/Style.scss";

$thickness: 11px;
$knob-size: 30%;

Scrollbar {
    position: relative;
    height: 100%;
    width: $thickness;
    overflow: visible;

    .background {
        position: absolute;
        background-color: $gray;
        width: $thickness;
        height: 100%;
        top: 0px;
        //transform: translateX(-$thickness / 2);
    }

    .knob {
        position: absolute;
        top: 0px;
        left: 0px;
        width: $thickness;
        height: $knob-size;
        background-color: $white;
        pointer-events: none;
    }

    &.horizontal {
        height: $thickness;
        width: 100%;

        .knob {
            width: $knob-size;
            height: $thickness;
        }

        .background {
            width: 100%;
            height: calc($thickness / 2);
            top: calc($thickness * 0.2);
            left: 0px;
        }
    }
}