@use "lib/css-vars";
@use "lib/mixins";
@use "settings/sliders";

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

.plyr--full-ui input[type='range'] {
  // WebKit
  -webkit-appearance: none; /* stylelint-disable-line */
  background: transparent;
  border: 0;
  border-radius: calc(#{sliders.$plyr-range-thumb-height} * 2);
  // `color` property is used in JS to populate lower fill for WebKit
  color: sliders.$plyr-range-fill-background;
  display: block;
  height: calc((#{sliders.$plyr-range-thumb-active-shadow-width} * 2) + #{sliders.$plyr-range-thumb-height});
  margin: 0;
  padding: 0;
  transition: box-shadow 0.3s ease;
  width: 100%;

  &::-webkit-slider-runnable-track {
    @include mixins.plyr-range-track();
    background-image: linear-gradient(to right, currentColor css-vars.var(--value, 0%), transparent css-vars.var(--value, 0%));
  }

  &::-webkit-slider-thumb {
    @include mixins.plyr-range-thumb();
    -webkit-appearance: none; /* stylelint-disable-line */
    margin-top: calc(((#{sliders.$plyr-range-thumb-height} - #{sliders.$plyr-range-track-height}) / 2) * -1);
  }

  // Mozilla
  &::-moz-range-track {
    @include mixins.plyr-range-track();
  }

  &::-moz-range-thumb {
    @include mixins.plyr-range-thumb();
  }

  &::-moz-range-progress {
    background: currentColor;
    border-radius: calc(#{sliders.$plyr-range-track-height} / 2);
    height: sliders.$plyr-range-track-height;
  }

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

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

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

    background: currentColor;
  }

  &::-ms-thumb {
    @include mixins.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 {
      @include mixins.plyr-tab-focus();
    }

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

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