@import './../theme/vars.scss';
@import './../mixins/reset.scss';

$sliderPrefixCls: #{$vender-prefix}-slider;
$combineSliderPrefixCls: #{$vender-prefix}-combine-slider;
$handleSliderPrefixCls: #{$vender-prefix}-handle-slider;

// $sliderColor: $primary-color;
$sliderColor: var(--primary-color);

.#{$sliderPrefixCls} {
  @include reset-component2;

  padding: 6px 7px;
  cursor: pointer;

  &:not(&-disabled):hover {
    .#{$sliderPrefixCls}-layer {
      background-color: $slider-layer-active-color;
    }
  }

  &.#{$sliderPrefixCls}-disabled {
    cursor: not-allowed;

    .#{$sliderPrefixCls}-range {
      background-color: $slider-range-color;
    }

    .#{$sliderPrefixCls}-bar {
      border-color: $slider-range-color;

      &:hover {
        border-color: $slider-range-color;
      }
    }
  }

  &-layer {
    position: relative;
    height: 4px;
    background-color: $slider-layer-color;
    border-radius: 2px;

    .#{$sliderPrefixCls}-range {
      width: 0%;
      height: 100%;
      background-color: $sliderColor;
      border-radius: 2px;
    }

    .#{$sliderPrefixCls}-bar {
      -webkit-user-drag: none;
      position: absolute;
      top: 50%;
      left: 0;
      width: 1em;
      height: 1em;
      margin-top: -0.5em;
      margin-left: -0.5em;
      font-size: 14px;
      cursor: pointer;
      background-color: white;
      border: 2px solid $sliderColor;
      transition: transform 0.1s, border-color 0.1s;

      &-circle {
        border-radius: 50%;

        &:hover:not(.#{$sliderPrefixCls}-bar-disabled) {
          border-color: $primary-color-deep;
          transform: scale(1.2);
          transform-origin: center center;
        }
      }
    }
  }
}

.#{$combineSliderPrefixCls} {
  display: flex;
  flex-direction: row;
  align-items: center;

  .#{$sliderPrefixCls} {
    flex: 1;
    min-width: 6em;
  }

  .#{$vender-prefix}-input-number {
    .#{$vender-prefix}-input {
      width: 6em;
      margin-left: 0.5em;
    }
  }
}

.#{$handleSliderPrefixCls} {
  display: flex;
  flex-direction: row;
  align-items: center;

  .#{$sliderPrefixCls} {
    flex: 1;
    min-width: 6em;
  }

  .amos-btn[disabled] {
    background: transparent;
    border-color: transparent;
  }
}