@import "./variables.scss";
@import "~@alifd/next/lib/core/style/_global";
@import "~@alifd/next/lib/core/style/_motion";
@import "~@alifd/next/lib/range/scss/variable";

.#{$css-prefix} {
  &range {
    .#{$css-prefix}range-slider-inner {
      background: $color-gradient-1;
      border: 0px;

      &:hover {
        background: $color-gradient-1;
        transform: scale(1.3);

      }
    }

    &.disabled {
      .#{$css-prefix}range-slider-inner {
        &:hover {
          background: $color-fill1-4;
          transform: scale(1);

        }
      }

      .#{$css-prefix}range-scale-item.activated {
        background: $color-text1-1;
      }
    }

    .#{$css-prefix}range-scale {
      .#{$css-prefix}range-scale-item {
        height: $b-design-range-scale-m-height;
        border-radius: 1px;
        margin-top: 1px;
        border: 0px;
      }
    }

  }

  &range.#{$css-prefix}small {
    .#{$css-prefix}range-scale {
      height: $b-design-range-scale-s-height;
    }

    .#{$css-prefix}range-slider,
    .#{$css-prefix}range-slider-inner {
      @include b-design-slider-size($b-design-range-slider-s-size)
    }

    .#{$css-prefix}range-track,
    .#{$css-prefix}range-selected {
      height: $b-design-range-track-s-size;
      margin-top: -1px;
    }

    .#{$css-prefix}range-scale {
      .#{$css-prefix}range-scale-item {
        border-radius: 1px;
        margin-top: -1px;
      }
    }
  }

  &range.#{$css-prefix}large {
    .#{$css-prefix}range-scale {
      height: $b-design-range-scale-l-height;
    }

    .#{$css-prefix}range-slider,
    .#{$css-prefix}range-slider-inner {
      @include b-design-slider-size($b-design-range-slider-l-size)
    }

    .#{$css-prefix}range-track,
    .#{$css-prefix}range-selected {
      height: $b-design-range-track-l-size;
      margin-top: -3px;
    }

    .#{$css-prefix}range-scale {
      .#{$css-prefix}range-scale-item {
        margin-top: 3px;
      }
    }
  }
}