@use 'sass:math';

.rc-slider {
  display: block;
  position: relative;
  height: $slider-handle-size;
  padding: math.div(($slider-handle-size - $slider-rail-height), 2) 0;
  width: 100%;
  box-sizing: border-box;
  touch-action: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  > .rc-slider-rail {
    position: absolute;
    width: 100%;
    height: $slider-rail-height;
    background-color: $slider-rail-background;
    border-radius: $slider-rail-border-radius;
  }

  > .rc-slider-track {
    position: absolute;
    left: 0;
    height: $slider-rail-height;
    border-radius: $slider-rail-border-radius;
    background-color: $slider-track-base-background;
  }

  .rc-slider-dot,
  .rc-slider-handle {
    position: absolute;
    width: $slider-handle-size;
    height: $slider-handle-size;
    border-radius: $slider-handle-border-radius;

    border-style: $slider-handle-border-style;
    border-color: $slider-handle-border-color;
    border-width: $slider-handle-border-width;

    background-color: $slider-handle-background;

    top: 50%;
    transform: translate(-50%, -50%) !important;
  }

  .rc-slider-dot {
    height: $slider-step-size;
    width: $slider-step-size;
    border-color: $slider-inactive-dot-border-color;
    border-width: $slider-step-border-width;

    &.rc-slider-dot-active {
      border-color: $slider-handle-border-color;
    }
  }

  .rc-slider-handle {
    cursor: pointer;
  }

  .rc-slider-mark {
    position: absolute;
    top: $slider-handle-size;
    left: 0;
    width: 100%;

    .rc-slider-mark-text {
      position: absolute;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      cursor: pointer;

      font-size: $slider-mark-font-size;
      font-weight: $slider-mark-font-weight;
      color: $slider-mark-color;

      transition-property: color;
      transition-timing-function: $transition-ease;
      transition-duration: $transition-duration;

      &.rc-slider-mark-text-active {
        color: $slider-active-mark-color;
      }
    }
  }


  @each $label, $color in $ui-color-map {
    &.is-#{$label} {
      > .rc-slider-track {
        background-color: $color;
      }

      .rc-slider-handle {
        border-color: $color;
      }

      .rc-slider-dot.rc-slider-dot-active {
        border-color: $color;
      }

      .rc-slider-mark-text.rc-slider-mark-text-active {
        color: $color;
      }
    }
  }
}