.#{$slider-prefix-cls} {

  @include hover-focus {
    .#{$slider-prefix-cls}__track {
      background-color: darken($slider-track-bg, 10%);
    }

    .#{$slider-prefix-cls}__step {
      background-color: darken($slider-bg, 10%);
    }
  }

  //disabled
  @include slider-disable {
    .#{$slider-prefix-cls}__track {
      background-color: primary-color($slider-track-bg, 45);
    }

    .#{$slider-prefix-cls}__step {
      background: mix(rgba(0,0,0,.15), rgba(255,255,255,.45), 50);
    }

    .#{$slider-prefix-cls}__handle-button {
      border-color: mix(rgba(255,255,255,.45), $slider-track-bg, 50);
      @include hover-focus {
        cursor: not-allowed;
        transform: scale(1);
      }
    }
  }

  //color
  @each $color, $value in $color-status {
    &--#{$color} {

      @include hover-focus {
        .#{$slider-prefix-cls}__track {
          background-color: darken(nth($value, 1), 10%);
        }
      }

      @include status-disabled {
        .#{$slider-prefix-cls}__track {
          background-color: nth($value, 1);
        }
      }
      .#{$slider-prefix-cls}__track {
        background-color: nth($value, 1);
      }

      .#{$slider-prefix-cls}__handle-button {
        border-color: nth($value, 1);
      }
    }
  }
  position: relative;
  z-index: 1;
  cursor: $slider-cursor;

  &__wrap {
    //height: $slider-handle-size + ($slider-handle-border-width * 2);
    margin: ($slider-handle-size * 2) 0;
  }

  &__track,
  &__step {
    height: $slider-height;
    border-radius: $slider-border-radius;
  }

  //track
  &__track {
    position: absolute;
    left: 0;
    z-index: 1;
    background-color: $slider-track-bg;
    transition: $slider-transition;
  }

  //step
  &__step {
    position: relative;
    background: $slider-bg;
  }

  //handle
  &__handle {
    position: absolute;
    z-index: 2;
    margin-top: -#{$slider-handle-size / 2 + $slider-handle-border-width - $slider-height / 2};
    margin-left: -#{$slider-handle-size / 2 + $slider-handle-border-width - $slider-height / 2};
    line-height: 1;

    &-button {

      @include hover-focus {
        cursor: grab;
        outline: none;
        transform: scale(1.3);
      }
      box-sizing: content-box;
      display: block;
      width: $slider-handle-size;
      height: $slider-handle-size;
      background-color: $slider-handle-bg;
      border: $slider-handle-border-width solid $slider-handle-border-color;
      border-radius: 50%;
      box-shadow: $slider-handle-box-shadow;
      transition: $slider-handle-transition;

      &--dragging {
        &,
        &:hover {
          cursor: grabbing;
        }
      }
    }
  }

  //mark
  &__mark {
    z-index: 3;
    min-height: 36px;
    font-size: $slider-mark-font-size;

    &-stop {
      $stop: #{&};
      position: absolute;

      &-label {
        display: block;
        min-height: $slider-stop-scale-height;
        padding-top: 2px;
      }

      &-value {
        display: block;
        margin-left: -50%;

        #{$stop}:first-child & {
          margin-left: 0;
        }

        &::before {
          display: block;
          width: 1px;
          height: $slider-stop-scale-height;
          margin-top: $slider-stop-scale-margin-top;
          margin-left: 30%;
          content: " ";
          background: $input-border-color;
          border-right: 1px solid $input-border-color;
        }
      }

      &-label + &-value::before {
        content: none;
      }
    }
  }

  &--dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }

  //size
  &--lg {
    @include slider-size($slider-lg-height, $slider-lg-handle-size, $slider-lg-handle-border-width);
  }

  &--sm {
    @include slider-size($slider-sm-height, $slider-sm-handle-size, $slider-sm-handle-border-width, $slider-sm-mark-font-size);
  }
}