// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
// elements cannot be mixed. As such, there are no shared styles for focus or
// active states on prefixed selectors.

@use '../../config' as *;

.form-range {
  // scss-docs-start range-css-vars
  --range-track-width: #{$form-range-track-width};
  --range-track-height: #{$form-range-track-height};
  --range-track-cursor: #{$form-range-track-cursor};
  --range-track-bg: #{$form-range-track-bg};
  --range-track-border-radius: #{$form-range-track-border-radius};
  --range-track-box-shadow: #{$form-range-track-box-shadow};
  --range-thumb-width: #{$form-range-thumb-width};
  --range-thumb-height: #{$form-range-thumb-height};
  --range-thumb-bg: #{$form-range-thumb-bg};
  --range-thumb-border: #{$form-range-thumb-border};
  --range-thumb-border-radius: #{$form-range-thumb-border-radius};
  --range-thumb-box-shadow: #{$form-range-thumb-box-shadow};
  --range-thumb-active-bg: #{$form-range-thumb-active-bg};
  --range-thumb-disabled-bg: #{$form-range-thumb-disabled-bg};
  --range-thumb-transition: #{$form-range-thumb-transition};
  // scss-docs-end range-css-vars

  width: 100%;
  height: calc(var(--range-thumb-height) + #{$form-range-thumb-focus-box-shadow-width * 2});
  padding: 0; // Need to reset padding
  appearance: none;
  background-color: transparent;

  &:focus {
    outline: 0;

    // Pseudo-elements must be split across multiple rulesets to have an effect.
    // No box-shadow() mixin for focus accessibility.
    &::-webkit-slider-thumb {
      @include focus-ring(true);
    }
    &::-moz-range-thumb {
      @include focus-ring(true);
    }
  }

  &::-moz-focus-outer {
    border: 0;
  }

  &::-webkit-slider-thumb {
    width: var(--range-thumb-width);
    height: var(--range-thumb-height);
    margin-top: calc((var(--range-track-height) - var(--range-thumb-height)) / 2); // Webkit specific
    appearance: none;
    @include gradient-bg(var(--range-thumb-bg));
    border: var(--range-thumb-border);
    @include border-radius(var(--range-thumb-border-radius));
    @include box-shadow(var(--range-thumb-box-shadow));
    @include transition(var(--range-thumb-transition));
    outline-color: transparent;

    &:active {
      @include gradient-bg(var(--range-thumb-active-bg));
    }
  }

  &::-webkit-slider-runnable-track {
    width: var(--range-track-width);
    height: var(--range-track-height);
    color: transparent; // Why?
    cursor: var(--range-track-cursor);
    background-color: var(--range-track-bg);
    border-color: transparent;
    @include border-radius(var(--range-track-border-radius));
    @include box-shadow(var(--range-track-box-shadow));
  }

  &::-moz-range-thumb {
    width: var(--range-thumb-width);
    height: var(--range-thumb-height);
    appearance: none;
    @include gradient-bg(var(--range-thumb-bg));
    border: var(--range-thumb-border);
    @include border-radius(var(--range-thumb-border-radius));
    @include box-shadow(var(--range-thumb-box-shadow));
    @include transition(var(--range-thumb-transition));
    outline-color: transparent;

    &:active {
      @include gradient-bg(var(--range-thumb-active-bg));
    }
  }

  &::-moz-range-track {
    width: var(--range-track-width);
    height: var(--range-track-height);
    color: transparent;
    cursor: var(--range-track-cursor);
    background-color: var(--range-track-bg);
    border-color: transparent; // Firefox specific?
    @include border-radius(var(--range-track-border-radius));
    @include box-shadow(var(--range-track-box-shadow));
  }

  &:disabled {
    pointer-events: none;

    &::-webkit-slider-thumb {
      background-color: var(--range-thumb-disabled-bg);
    }

    &::-moz-range-thumb {
      background-color: var(--range-thumb-disabled-bg);
    }
  }
}