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

@mixin generate-form-range {
  .form-range {
    @include generate-variables($form-range);
    appearance: none;
    margin-block-start: calc(#{config('thumb-block-size', $form-range)} / 2 - #{config('track-block-size', $form-range)} / 2);

    &:focus-visible {
      outline: none;

      &::-webkit-slider-thumb {
        @include focus-ring(
          $type: config('focus-ring-type', $form-range, false),
          $border-color: null,
          $ring-color: color('range-thumb-focus-ring', 'form'),
          $box-shadow-type: config('focus-ring-box-shadow-type', $form-range, false),
          $ring-size: config('focus-ring-size', $form-range, false),
          $ring-offset: config('focus-ring-offset', $form-range, false)
        );
      }

      &::-moz-range-thumb {
        @include focus-ring(
          $type: config('focus-ring-type', $form-range, false),
          $border-color: null,
          $ring-color: color('range-thumb-focus-ring', 'form'),
          $box-shadow-type: config('focus-ring-box-shadow-type', $form-range, false),
          $ring-size: config('focus-ring-size', $form-range, false),
          $ring-offset: config('focus-ring-offset', $form-range, false)
        );
      }
    }

    &::-webkit-slider-runnable-track {
      background-color: color('range-track-background', 'form');
      block-size: config('track-block-size', $form-range);
      border-radius: config('track-border-radius', $form-range);
    }

    &::-moz-range-track {
      background-color: color('range-track-background', 'form');
      block-size: config('track-block-size', $form-range);
      border-radius: config('track-border-radius', $form-range);
    }

    &::-webkit-slider-thumb {
      appearance: none;
      background-color: color('range-thumb-background', 'form');
      block-size: config('thumb-block-size', $form-range);
      border-radius: config('thumb-border-radius', $form-range);
      inline-size: config('thumb-inline-size', $form-range);
      margin-block-start: calc(#{config('track-block-size', $form-range)} / 2 - #{config('thumb-block-size', $form-range)} / 2);
    }

    &::-moz-range-thumb {
      background-color: color('range-thumb-background', 'form');
      block-size: config('thumb-block-size', $form-range);
      border: 0; /*Removes extra border that FF applies*/
      border-radius: config('thumb-border-radius', $form-range);
      inline-size: config('thumb-inline-size', $form-range);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
}