@use "../config" as *;
@use "../colors" as *;
@use "../variables" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/gradients" as *;
@use "form-variables" as *;

// scss-docs-start form-range-variables
$form-range-track-width:          100% !default;
$form-range-track-height:         .5rem !default;
$form-range-track-cursor:         pointer !default;
$form-range-track-bg:             var(--#{$prefix}secondary-bg) !default;
$form-range-track-border-radius:  1rem !default;
$form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;

$form-range-thumb-width:                   1rem !default;
$form-range-thumb-height:                  $form-range-thumb-width !default;
$form-range-thumb-bg:                      $component-active-bg !default;
$form-range-thumb-border:                  0 !default;
$form-range-thumb-border-radius:           1rem !default;
$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
$form-range-thumb-disabled-bg:             var(--#{$prefix}secondary-color) !default;
$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// scss-docs-end form-range-variables

@layer forms {
  .form-range {
    width: 100%;
    height: add($form-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 { box-shadow: $form-range-thumb-focus-box-shadow; }
      &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow; }
    }

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

    &::-webkit-slider-thumb {
      width: $form-range-thumb-width;
      height: $form-range-thumb-height;
      margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
      appearance: none;
      @include gradient-bg($form-range-thumb-bg);
      border: $form-range-thumb-border;
      @include border-radius($form-range-thumb-border-radius);
      @include box-shadow($form-range-thumb-box-shadow);
      @include transition($form-range-thumb-transition);

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

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

    &::-moz-range-thumb {
      width: $form-range-thumb-width;
      height: $form-range-thumb-height;
      appearance: none;
      @include gradient-bg($form-range-thumb-bg);
      border: $form-range-thumb-border;
      @include border-radius($form-range-thumb-border-radius);
      @include box-shadow($form-range-thumb-box-shadow);
      @include transition($form-range-thumb-transition);

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

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

    &:disabled {
      pointer-events: none;

      &::-webkit-slider-thumb {
        background-color: $form-range-thumb-disabled-bg;
      }

      &::-moz-range-thumb {
        background-color: $form-range-thumb-disabled-bg;
      }
    }
  }
}