@slider-height: 1.5rem;
@slider-track-height: 0.625rem;
@slider-track-active-height: 0.75rem;
@slider-thumb-size: 1.25rem;
@slider-thumb-active-size: 1.5rem;
@slider-thumb-width: 0.5rem;
@slider-track-color: @color-control-hover;
@slider-track-fill-color: @color-control-active;
@slider-thumb-color: @color-control-fore;

.slider {
    display: inline-block;
    height: @slider-height;
    position: relative;
    touch-action: none;
    width: 100%;

    &__track {
        background-color: @slider-track-color;
        display: inline-block;
        height: @slider-track-height;
        margin-left: @slider-thumb-width / 2;
        margin-top: (@slider-height - @slider-track-height) / 2;
        position: absolute;
        width: calc(100% - @slider-thumb-width);

        &__fill {
            background-color: @slider-track-fill-color;
            display: inline-block;
            height: 100%;
            position: absolute;

            &::before {
                background-color: @slider-track-fill-color;
                content: "";
                height: 100%;
                position: absolute;
                right: 100%;
                width: @slider-thumb-width / 2;
            }
        }

        &::before,
        &::after {
            background-color: @slider-track-color;
            content: "";
            height: 100%;
            position: absolute;
            width: @slider-thumb-width / 2;
        }

        &::before {
            right: 100%;
        }

        &::after {
            left: 100%;
        }
    }

    &__thumb-wrapper {
        margin-left: @slider-thumb-width / 2;
        position: absolute;
        width: calc(100% - @slider-thumb-width);
    }

    &__thumb {
        background-color: @slider-thumb-color;
        cursor: pointer;
        display: inline-block;
        height: @slider-thumb-size;
        margin-left: -@slider-thumb-width / 2;
        margin-top: (@slider-height - @slider-thumb-size) / 2;
        position: absolute;
        width: @slider-thumb-width;

        &__value {
            color: @color-control-fore;
            cursor: default;
            left: calc(100% + @size-text-normal / 2);
            line-height: @slider-thumb-size;
            position: absolute;
            -moz-user-select: none;
            user-select: none;

            &--flip {
                left: initial;
                right: calc(100% + @size-text-normal / 2);
            }
        }
    }

    &--active &__thumb {
        box-shadow: 0 0 0.25rem black;
        height: @slider-thumb-active-size;
        margin-top: (@slider-height - @slider-thumb-active-size) / 2;

        &__value {
            line-height: @slider-thumb-active-size;
        }
    }

    &--active &__track {
        height: @slider-track-active-height;
        margin-top: (@slider-height - @slider-track-active-height) / 2;
    }

    &__value {
        display: none;
    }
}
