@import '../../common/styles/colors';
@import '../../common/styles/text-base';

@pin-border-width: 1px;

@pin-outline-color: @color-gray-30;
@pin-outline-color-disabled: @color-gray-20;
@pin-active-outline-color: @color-blue-60;
@pin-hover-outline-color: @color-gray-40;

@pin-color: @color-white;
@pin-active-color: @color-gray-20;

@slider-color-primary-disabled: @color-blue-40;
@slider-color-secondary-disabled: @color-green-20;

@slider-label-color: @color-gray-80;
@slider-label-color-disabled: @color-gray-30;
@_slider-label-line-height: @_font-size-medium;

@slider-background-color: @color-gray-30;
@slider-background-color-disabled: @color-gray-20;

@height: 4px;
@unavailable-height: 2px;
@available-offset: (@unavailable-height - @height) / 2;
@diameter: 22px;

.bloko-slider {
    height: @height - @unavailable-height;
    overflow: visible;
    position: relative;
    margin: ((@diameter - @height) / 2) 0;
    box-sizing: border-box;
    background-color: @slider-background-color-disabled;
    z-index: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.bloko-slider_with-labels {
    margin-bottom: 30px;
}

.bloko-slider_disabled {
    background-color: @slider-background-color-disabled;
    cursor: default;

    .bloko-slider__mark {
        border-color: @slider-background-color-disabled;
    }

    .bloko-slider__label {
        color: @slider-label-color-disabled;
    }

    .bloko-slider__range-mark {
        background-color: @slider-color-primary-disabled;
        cursor: default;
    }

    &.bloko-slider_secondary .bloko-slider__range-mark {
        background-color: @slider-color-secondary-disabled;
    }
}

.bloko-slider__active-zone {
    position: absolute;
    left: 0;
    right: 0;
    height: @diameter;
    top: round((@diameter - @height) / 2) * -1;
    background-color: transparent;
}

.bloko-slider__label {
    .bloko-text-medium();

    position: absolute;
    top: 18px;
    color: @slider-label-color;
    font-family: @_font-family;
    line-height: @_slider-label-line-height;
    white-space: nowrap;
}

.bloko-slider__label_unavailable {
    color: @slider-label-color-disabled;
}

.bloko-slider__label-content {
    margin-left: -50%;
}

.bloko-slider__mark {
    position: absolute;
    top: -6px;
    width: 0;
    height: 16px;
    border-left: 1px solid @slider-background-color;
    z-index: 1;
    user-select: none;
}

.bloko-slider__pin {
    background-color: @pin-color;
    outline: none;
    border: @pin-border-width solid @pin-outline-color;
    box-shadow: 0 2px 1px fade(@color-gray-60, 20%);
    transition: background-color 0.1s ease-out;
    z-index: 3;
    width: @diameter;
    height: @diameter;
    border-radius: @diameter;
    position: absolute;
    top: 50%;
    margin-top: -@diameter / 2;
    padding: 0;
    box-sizing: border-box;
    margin-left: -@diameter / 2;
    user-select: none;

    &:hover {
        border-color: @pin-hover-outline-color;
    }

    &:focus {
        background-color: @color-white;
        outline: none;
        border-color: @pin-active-outline-color;
        box-shadow: 0 0 4px 1px fade(@color-blue-40, 20%);
    }

    &:active {
        background-color: @pin-active-color;
        border-color: @pin-hover-outline-color;
        box-shadow: none;
    }

    [disabled] &,
    &[disabled] {
        border-color: @pin-outline-color-disabled;
        background-color: @color-white;
        box-shadow: none;
        cursor: default;
    }
}

.bloko-slider__range-mark {
    background-color: @color-blue-60;
    position: absolute;
    top: @available-offset;
    left: 0;
    right: 0;
    bottom: @available-offset;
    z-index: 2;
}

.bloko-slider__available-mark {
    background-color: @slider-background-color;
    position: absolute;
    top: @available-offset;
    left: 0;
    right: 0;
    bottom: @available-offset;
    z-index: 1;
}

.bloko-slider_secondary .bloko-slider__range-mark {
    background-color: @color-green-60;
}