@use './focus';

$ods-range-height: 32px;
$ods-input-range-height: 8px;
$ods-input-range-size-thumb: 16px;
$range-background-color-active: var(--ods-color-primary-500);
$range-background-color: var(--ods-color-neutral-200);
$range-z-index-dual: 1;

@mixin ods-range() {
  $range: &;

  appearance: none;
  margin: calc($ods-input-range-height / 2) 0;
  outline: none;
  border-radius: var(--ods-border-radius-sm);
  cursor: pointer;
  height: $ods-input-range-height;
  pointer-events: none;

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

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

  &::-ms-thumb {
    @include thumb();
  }

  &::-webkit-slider-container {
    min-block-size: 0;
  }


  &:not(:disabled) {
    &::-webkit-slider-thumb {
      @include thumb-hover-active();
    }

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

    &::-ms-thumb {
      @include thumb-hover-active();
    }
  }

  &:focus {
    &::-webkit-slider-thumb {
      @include focus.ods-focus();

      border-color: var(--ods-color-primary-200);
      background-color: var(--ods-color-primary-200);
    }

    &::-moz-range-thumb {
      @include focus.ods-focus();

      border-color: var(--ods-color-primary-200);
      background-color: var(--ods-color-primary-200);
    }

    &::-ms-thumb {
      @include focus.ods-focus();

      border-color: var(--ods-color-primary-200);
      background-color: var(--ods-color-primary-200);
    }
  }

  &:not(.ods-range__range-dual) {
    appearance: none;
    border-width: 0;
    border-radius: var(--ods-border-radius-sm);
    background: linear-gradient($range-background-color-active, $range-background-color-active) 0 / var(--ods-range-value-percentage) 100% no-repeat, $range-background-color;

    &:disabled {
      background: linear-gradient(var(--ods-color-neutral-500), var(--ods-color-neutral-500)) 0 / var(--ods-range-value-percentage) 100% no-repeat, $range-background-color;
    }
  }

  &:disabled {
    cursor: not-allowed;

    &::-webkit-slider-thumb {
      cursor: not-allowed;
    }

    &::-moz-range-thumb {
      cursor: not-allowed;
    }

    &::-ms-thumb {
      cursor: not-allowed;
    }
  }

  &:not(:disabled)#{$range}--error {
    &::-webkit-slider-thumb {
      border-color: var(--ods-color-form-element-border-critical);
    }

    &::-moz-range-thumb {
      border-color: var(--ods-color-form-element-border-critical);
    }

    &::-ms-thumb {
      border-color: var(--ods-color-form-element-border-critical);
    }
  }
}

@mixin thumb() {
  appearance: none;
  box-sizing: border-box;
  border: 1px solid var(--ods-color-neutral-300);
  border-radius: 50%;
  box-shadow: none;
  background-color: var(--ods-color-neutral-000);
  cursor: pointer;
  width: $ods-input-range-size-thumb;
  height: $ods-input-range-size-thumb;
  pointer-events: auto;
}

@mixin thumb-hover-active() {
  &:active {
    border-color: var(--ods-color-primary-200);
    background-color: var(--ods-color-primary-200);
  }

  &:hover {
    border-color: var(--ods-color-primary-200);
    background-color: var(--ods-color-primary-200);
  }
}


@mixin ods-range-dual() {
  .ods-range__range-dual {
    z-index: $range-z-index-dual;
    background: linear-gradient(to right,
      $range-background-color 0,
      $range-background-color min(var(--ods-range-value-percentage), var(--ods-range-value-percentage-dual)),
      $range-background-color-active min(var(--ods-range-value-percentage), var(--ods-range-value-percentage-dual)),
      $range-background-color-active max(var(--ods-range-value-percentage), var(--ods-range-value-percentage-dual)),
      $range-background-color max(var(--ods-range-value-percentage), var(--ods-range-value-percentage-dual)),
      $range-background-color 100%);

    &:disabled {
      background: linear-gradient(to right,
        $range-background-color 0,
        $range-background-color min(var(--ods-range-value-percentage), var(--ods-range-value-percentage-dual)),
        var(--ods-color-neutral-500) min(var(--ods-range-value-percentage), var(--ods-range-value-percentage-dual)),
        var(--ods-color-neutral-500) max(var(--ods-range-value-percentage), var(--ods-range-value-percentage-dual)),
        $range-background-color max(var(--ods-range-value-percentage), var(--ods-range-value-percentage-dual)),
        $range-background-color 100%);
    }
  }

  .ods-range__range {
    position: absolute;
    z-index: $range-z-index-dual + 1;
    margin-top: $ods-input-range-height;
    height: 0;
  }
}