// --------------------------------------------------------------
// Slider inputs - <input type="range">
// --------------------------------------------------------------

// Specificity is for bootstrap compatibility
.plyr--full-ui input[type='range'] {
    display: block;
    height: @plyr-range-thumb-active-height;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: box-shadow 0.3s ease;
    border-radius: (@plyr-range-thumb-height * 2);

    // Used in JS to populate lower fill for WebKit
    color: @plyr-range-fill-bg;

    // WebKit
    -webkit-appearance: none;

    &::-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-range-progress {
        height: @plyr-range-track-height;
        background: currentColor;
        border-radius: (@plyr-range-track-height / 2);
    }

    // Microsoft
    &::-ms-track {
        color: transparent;
        .plyr-range-track();
    }

    &::-ms-fill-upper {
        .plyr-range-track();
    }

    &::-ms-fill-lower {
        .plyr-range-track();

        background: currentColor;
    }

    &::-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;
    }

    &.plyr__tab-focus {
        &::-webkit-slider-runnable-track {
            .plyr-tab-focus();
        }

        &::-moz-range-track {
            .plyr-tab-focus();
        }

        &::-ms-track {
            .plyr-tab-focus();
        }
    }

    // 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--full-ui.plyr--video input[type='range'] {
    &::-webkit-slider-runnable-track {
        background: @plyr-video-range-track-bg;
    }

    &::-moz-range-track {
        background: @plyr-video-range-track-bg;
    }

    &::-ms-track {
        background: @plyr-video-range-track-bg;
    }
}

// Audio range inputs
.plyr--full-ui.plyr--audio input[type='range'] {
    &::-webkit-slider-runnable-track {
        background: @plyr-audio-range-track-bg;
    }

    &::-moz-range-track {
        background: @plyr-audio-range-track-bg;
    }

    &::-ms-track {
        background: @plyr-audio-range-track-bg;
    }
}