@import "../../../css/static/properties";
@import "../../../css/static/mixin";

/* slider */
$track_height: .6em;

$thumb_width: .6em;
$thumb_height: 2em;

$tooltip_width: 4em;
$tooltip_height: 1.8em;

html:root {
    --slider-filler-color: #4370a2;
    --slider-disabled-filler-color: #3d618a;

    --slider-thumb-color: #808080;
    --slider-disabled-thumb-color: #4d4d4d;
}

.documentClass {
    @include user-select(none);
}

.container {
    font-size: .8em;

    position: relative;

    margin-top: $thumb_height / 2 - $track_height / 2;
    margin-bottom: $thumb_height / 2 - $track_height / 2;
    margin-right: $thumb_width / 2;
    margin-left: $thumb_width / 2;

    height: $track_height;

    cursor: pointer;

    background-color: #242527;
    border-radius: $border_radius_large;

    overflow: visible;

    .filler {
        position: absolute;

        top: 0;
        bottom: 0;

        background-color: var(--slider-filler-color);
        border-radius: $border_radius_large;

        @include transition(background-color .15s ease-in-out);
    }

    .thumb {
        position: absolute;

        top: 0;
        right: 0;

        height: $thumb_height;
        width: $thumb_width;

        margin-left: -($thumb_width / 2);
        margin-right: -($thumb_width / 2);

        margin-top: -($thumb_height - $track_height) / 2;
        margin-bottom: -($thumb_height - $track_height) / 2;

        background-color: var(--slider-thumb-color);
        @include transition(background-color .15s ease-in-out);
    }

    &.disabled {
        pointer-events: none;

        .thumb {
            background-color: var(--slider-disabled-thumb-color)!important;
        }

        .filler {
            background-color: var(--slider-disabled-filler-color);
        }
    }
}