@use "../functions" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/focus-ring" as *;
@use "../mixins/transition" as *;
@use "../mixins/gradients" as *;
@use "../mixins/tokens" as *;

$range-tokens: () !default;

// scss-docs-start range-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$range-tokens: defaults(
  (
    --range-track-width: 100%,
    --range-track-height: .5rem,
    --range-track-cursor: pointer,
    --range-track-bg: var(--bg-3),
    --range-track-border-radius: 1rem,
    --range-track-box-shadow: var(--box-shadow-inset),
    --range-thumb-width: 1rem,
    --range-thumb-height: var(--range-thumb-width),
    --range-thumb-bg: var(--primary-base),
    --range-thumb-border: var(--range-thumb-bg) solid var(--border-color),
    --range-thumb-border-radius: 1rem,
    --range-thumb-box-shadow: "0 1px 2px rgb(0 0 0 / 7.5%), 0 2px 4px rgb(0 0 0 / 7.5%)",
    --range-thumb-active-bg: color-mix(in oklch, var(--primary-base) 70%, var(--bg-body)),
    --range-thumb-disabled-bg: var(--fg-3),
    --range-thumb-transition-property: "background-color, border-color, box-shadow",
    --range-thumb-transition-timing: .15s ease-in-out,
    --range-thumb-transition: var(--range-thumb-transition-property) var(--range-thumb-transition-timing),
  ),
  $range-tokens
);
// scss-docs-end range-tokens

// scss-docs-start range-mixins
@mixin 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));

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

@mixin range-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; // Firefox specific?
  @include border-radius(var(--range-track-border-radius));
  @include box-shadow(var(--range-track-box-shadow));
}
// scss-docs-end range-mixins

@layer forms {
  .form-range {
    @include tokens($range-tokens);

    width: 100%;
    height: calc(var(--range-thumb-height) + (var(--focus-ring-width) * 2));
    padding: 0; // Need to reset padding
    appearance: none;
    background-color: transparent;

    &:hover {
      &::-webkit-slider-thumb {
        @include focus-ring(false, color-mix(in oklch, var(--primary-focus-ring), transparent));
      }
      &::-moz-range-thumb     {
        @include focus-ring(false, color-mix(in oklch, var(--primary-focus-ring), transparent));
      }
    }

    &:focus-visible {
      outline: 0;

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

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

    &::-webkit-slider-thumb {
      @include range-thumb();
      margin-top: calc((var(--range-track-height) - var(--range-thumb-height)) * .5); // Webkit specific
    }

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

    &::-webkit-slider-runnable-track {
      @include range-track();
    }

    &::-moz-range-track {
      @include range-track();
    }

    &:disabled {
      pointer-events: none;

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

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