@use "sass:color";
@use "./../../variables" as *;

@mixin make-track() {
  background: hsl(from var(--border-color-main) h s l / 10%);
  border-radius: var(--input-round-border-radius);
  width: 100%;
  height: calc(var(--spacer) * 0.5);
  cursor: pointer;
}

@mixin make-thumb(
  $focus: false,
  $disabled: false,
  $color: var(--input-detail-background),
  $shadow: hsl(from var(--primary) h s l / 25%)
) {
  margin-top: calc(var(--spacer) * -0.25);
  width: var(--spacer);
  height: var(--spacer);
  background: $color;
  border: 1px solid var(--border-color-main);
  border-radius: var(--input-round-border-radius);
  cursor: pointer;
  box-shadow: var(--box-shadow-small);
  appearance: none;

  @if $focus == true {
    box-shadow:
      0 0 0 1px var(--white),
      0 0 0 calc(var(--spacer) * 0.25) $shadow;
  }

  @if $disabled == true {
    background: var(--input-disabled-detail-background);
  }
}

input[type="range"] {
  --input-border-color: transparent;
  --input-hover-border-color: transparent;
  --input-focus-border-color: transparent;
  --input-active-border-color: transparent;
  --input-disabled-border-color: transparent;
  --input-box-shadow: none;
  --input-hover-box-shadow: none;
  --input-focus-box-shadow: none;
  --input-active-box-shadow: none;
  --input-disabled-box-shadow: none;
  --input-disabled-background: var(--white);
  --input-padding-x: 0;
  --input-small-padding-x: 0;
  --input-large-padding-x: 0;

  margin: calc(var(--spacer) * 0.5) 0;

  &::-moz-range-track {
    @include make-track;
  }

  &::-webkit-slider-runnable-track {
    @include make-track;
  }

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

  &::-webkit-slider-thumb {
    @include make-thumb(false, false);
  }

  &:focus {
    &::-webkit-slider-runnable-track {
      @include make-track;
    }

    &::-moz-range-track {
      @include make-track;
    }

    &::-webkit-slider-thumb {
      @include make-thumb(true, false);
    }
  }

  &:disabled,
  &.disabled,
  &[aria-disabled="true"] {
    --input-disabled-detail-background: color-mix(in oklab, var(--primary), #fff #{$link-shade-percentage});

    &::-webkit-slider-runnable-track {
      @include make-track;
    }

    &::-moz-range-track {
      @include make-track;
    }

    &::-moz-range-thumb {
      @include make-thumb(false, true);
    }

    &::-webkit-slider-thumb {
      @include make-thumb(false, true);
    }
  }

  @each $key, $value in $theme-colors {
    &.input--#{$key} {
      --input-disabled-detail-background: color-mix(in oklab, var(--#{$key}), #000 #{$link-shade-percentage});

      &::-moz-range-thumb {
        @include make-thumb(false, false, $value, hsl(from var(--#{$key}) h s l / 25%));
      }

      &::-webkit-slider-thumb {
        @include make-thumb(false, false, $value, hsl(from var(--#{$key}) h s l / 25%));
      }

      &:focus {
        &::-moz-range-thumb {
          @include make-thumb(true, false, $value, hsl(from var(--#{$key}) h s l / 25%));
        }

        &::-webkit-slider-thumb {
          @include make-thumb(true, false, $value, hsl(from var(--#{$key}) h s l / 25%));
        }
      }

      &:disabled,
      &.disabled,
      &[aria-disabled="true"] {
        &::-moz-range-thumb {
          @include make-thumb(false, true, $value, hsl(from var(--#{$key}) h s l / 25%));
        }

        &::-webkit-slider-thumb {
          @include make-thumb(false, true, $value, hsl(from var(--#{$key}) h s l / 25%));
        }
      }
    }
  }
}