@import "variables";

@mixin range($thumb-selector, $track-selector) {
    &::#{$thumb-selector} {
        -webkit-appearance: none;
        margin-top: -5px;
        border-radius: 50%;
        background: $color-main;
        border: none;
        height: 12px;
        width: 12px;
        border-radius: 50%;
        transition-property: transform, box-shadow;
        transition-duration: 250ms;
        transition-timing-function: ease-out;
    }
    &:focus::#{$thumb-selector} {
        box-shadow: 0 0 0 10px rgba($color-main, .2);
    }
    &:active::#{$thumb-selector} {
        transform: scale(1.5);
        box-shadow: none;
    }
    &:disabled::#{$thumb-selector} {
        transform: none;
        cursor: initial;
    }
    &::#{$track-selector} {
        width: 100%;
        height: 3px;
        cursor: inherit;
        background: $color-secondary;
        border-radius: 2px;
        border: none;
    }
}

vn-range {
    & > label {
        font-size: 12px;

        &.main {
            color: $color-main;
        }
        &.min-label {
            float: left;
        }
        &.max-label {
            float: right;
        }
    }
    & > input {
        cursor: pointer;
        height: 30px;
        display: block;
        width: 100%;
        background: transparent;
        border-color: transparent;
        -webkit-appearance: none;
        margin: .2em 0;

        &:focus {
            outline: none;
        }
        &::-moz-focus-outer {
            border: 0;
        }
        @include range(
            "-moz-range-thumb",
            "-moz-range-track"
        );
        @include range(
            "-webkit-slider-thumb",
            "-webkit-slider-runnable-track"
        );
        @include range(
            "-ms-thumb",
            "-ms-track"
        );
        &:disabled {
            cursor: initial;
        }
    }
}