/* stylelint-disable selector-class-pattern */

@use "sass:math";

$input-range-font-family: $sui-font-family-primary;
$input-range-primary-color: $sui-color-brand-denim !default;
$input-range-neutral-color: #aaa !default;
$input-range-neutral-light-color: #eee !default;
$input-range-disabled-color: $sui-color-brand-denim-300 !default;

// input-range-slider
$input-range-slider-background: $input-range-primary-color !default;
$input-range-slider-border: $sui-a-form-range-track-border-width solid $input-range-primary-color !default;
$input-range-slider-height: $sui-a-form-range-thumb-height !default;
$input-range-slider-width: $sui-a-form-range-thumb-width !default;
$input-range-slider-transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !default;
$input-range-slider-container-transition: left 0.1s ease-out !default;
$input-range-slider-active-transform: scale(1.1) !default;
$input-range-slider-disabled-border: $sui-a-form-range-track-border-width solid $input-range-disabled-color !default;

// input-range-label
$input-range-label-font-size: 0.8rem !default;

// input-range-track
$input-range-track-background: $input-range-neutral-light-color !default;
$input-range-track-height: $sui-a-form-range-track-height !default;
$input-range-track-transition: left 0.1s ease-out, width 0.1s ease-out !default;
$input-range-track-active-background: $input-range-primary-color !default;

@mixin reactFormRangeColor($color) {
  .input-range__track--active {
    background: $color;

    &::after {
      content: "";
      position: absolute;
      width: $sui-space-md;
      height: 100%;
    }
  }

  .input-range__label--value {
    background: $color;
    color: $sui-color-brand-denim-100;

    &::after {
      color: $color;
    }
  }

  .input-range__track--background {
    &::before {
      background: $color;
    }
  }

  .input-range__slider {
    background: $color;
    border-color: $color;
  }
}

.sui-a-form-range {
  &.as--primary {
    @include reactFormRangeColor($sui-color-primary);
  }

  &.as--success {
    @include reactFormRangeColor($sui-color-success);
  }

  &.as--warning {
    @include reactFormRangeColor($sui-color-warning);
  }

  &.as--danger {
    @include reactFormRangeColor($sui-color-danger);
  }
}

//input
.input-range {
  position: relative;
  height: $input-range-slider-height + $sui-a-form-range-track-border-width;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: rem(600);
  margin: 0 $sui-space-sm;
}

// slider
.input-range__slider {
  appearance: none;
  background: $input-range-slider-background;
  border: $input-range-slider-border;
  border-radius: 100%;
  cursor: pointer;
  display: block;
  height: $sui-a-form-range-thumb-height + $sui-a-form-range-track-border-width;
  width: $sui-a-form-range-thumb-width + $sui-a-form-range-track-border-width;
  box-shadow: inset 0 0 0 rem(3) $sui-color-brand-denim-100;
  outline: none;
  transition: $input-range-slider-transition;

  &:active {
    transform: $input-range-slider-active-transform;
  }

  .input-range--disabled & {
    background: $input-range-disabled-color;
    border: $input-range-slider-disabled-border;
    transform: none;
    cursor: not-allowed;
  }
}

.input-range__slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: $sui-a-form-range-thumb-width + $sui-a-form-range-track-border-width;
  top: -($sui-a-form-range-thumb-height + $sui-a-form-range-track-border-width + $sui-a-form-range-track-height);
  margin-left: math.div($input-range-slider-width + $sui-a-form-range-track-border-width, -2);
  transition: $input-range-slider-container-transition;
  z-index: 1;
}

// label
.input-range__label {
  font-family: $input-range-font-family;
  font-size: $input-range-label-font-size;
  transform: translateZ(0);
  white-space: nowrap;
}

.input-range__label--min,
.input-range__label--max {
  position: relative;
  color: $sui-color-text-light;

  .input-range__label-container {
    background-color: $sui-color-brand-denim-300;
    border-radius: $sui-border-radius-sm;
    padding: 0 $sui-space-xs;

    &::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      color: $sui-color-brand-denim-300;
      border: rem(5) solid transparent;
      margin-top: rem(-5);
      top: 50%;
    }
  }
}

.input-range__label--min {
  .input-range__label-container {
    &::after {
      border-left-color: currentColor;
      left: 100%;
    }
  }
}

.input-range__label--max {
  .input-range__label-container {
    &::after {
      border-right-color: currentColor;
      right: 100%;
    }
  }
}

.input-range__label--value {
  position: relative;
  text-align: center;
  padding: 0 $sui-space-xs;
  font-size: $sui-font-size-ms;
  background-color: $sui-color-brand-denim-300;
  border-radius: $sui-border-radius-sm;
  top: -$sui-space-sm;

  &::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    color: $sui-color-brand-denim-300;
    border: rem(5) solid transparent;
    border-top-color: currentColor;
    margin-left: rem(-5);
    bottom: rem(-10);
    left: 50%;
  }
}

// container
.input-range__label-container {
  position: relative;
  flex: none;
  text-align: center;
  font-size: $sui-font-size-ms;
}

// track
.input-range__track {
  cursor: pointer;
  display: block;
  height: $input-range-track-height;
  position: relative;
  transition: $input-range-track-transition;

  .input-range--disabled & {
    background: $input-range-disabled-color;
    cursor: not-allowed;
  }
}

.input-range__track--background {
  width: 100%;
  margin: 0 $sui-space-lg;
  background: $input-range-track-background;
  border-top-left-radius: $input-range-track-height;
  border-bottom-left-radius: $input-range-track-height;
  border-top-right-radius: $input-range-track-height;
  border-bottom-right-radius: $input-range-track-height;

  .input-range--disabled & {
    &::before {
      background: $input-range-track-background;
    }
  }
}

.input-range__track--active {
  background: $input-range-track-active-background;
  border-top-left-radius: $input-range-track-height;
  border-bottom-left-radius: $input-range-track-height;
}
