// Range inputs
// --------------------------------------------------------------

// Specificity is for bootstrap compatibility
.plyr input[type='range'] {
    display: block;
    height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
    width: 100%;
    margin: 0;
    padding: 0; 
    vertical-align: middle;
    
    appearance: none;
    cursor: pointer;
    border: none;
    background: transparent;
    
    // WebKit
    &::-webkit-slider-runnable-track {
        .plyr-range-track();
    }
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        margin-top: -((@plyr-range-thumb-height - @plyr-range-track-height) / 2);
        .plyr-range-thumb();
    }

    // Mozilla
    &::-moz-range-track {
        .plyr-range-track();
    }
    &::-moz-range-thumb {
        .plyr-range-thumb();
    }
    &::-moz-focus-outer {
        border: 0;
    }
    
    // Microsoft
    &::-ms-track {
        height: @plyr-range-track-height;
        background: transparent;
        border: 0;
        color: transparent;
    }
    &::-ms-fill-upper {
        .plyr-range-track();
    }
    &::-ms-fill-lower {
        .plyr-range-track();
        background: @plyr-range-selected-bg;
    }
    &::-ms-thumb {
        .plyr-range-thumb();
        // For some reason, Edge uses the -webkit margin above
        margin-top: 0; 
    }
    &::-ms-tooltip {
        display: none;
    }

    // Focus styles
    &:focus {
        outline: 0;
    }
    &::-moz-focus-outer {
        border: 0;
    }        
    &.tab-focus:focus {
        outline-offset: 3px;
    }
    
    // Pressed styles
    &:active {
        &::-webkit-slider-thumb {
            .plyr-range-thumb-active();
        }
        &::-moz-range-thumb {
            .plyr-range-thumb-active();
        }
        &::-ms-thumb {
            .plyr-range-thumb-active();
        }
    }
}

// Video range inputs
.plyr--video input[type='range'].tab-focus:focus {
    outline: 1px dotted fade(@plyr-video-control-color, 50%);
}

// Audio range inputs
.plyr--audio input[type='range'].tab-focus:focus {
    outline: 1px dotted fade(@plyr-audio-control-color, 50%);
}