.#{$slider-prefix-cls} {
  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;
    transition: $slider-transition;
    @include bg-gradient($slider-track-bg,$slider-track-gradient-bg);
  }

  //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 {
      display: block;
      box-sizing: content-box;
      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%;
      transition: $slider-handle-transition;

      @include hover-focus {
        cursor: grab;
        transform: scale(1.3);
        outline: none;
      }

      &--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{
          border-right: 1px solid $input-border-color;
          width: 1px;
          margin-left: 30%;
          background: $input-border-color;
          content: " ";
          height: $slider-stop-scale-height;
          display: block;
          margin-top: $slider-stop-scale-margin-top;
        }
      }

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

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

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

    .#{$slider-prefix-cls}__handle-button {
      border-color: lighten($slider-handle-border-color,20%);
    }
  }

  //disabled
  @include status-disabled {
    .#{$slider-prefix-cls}__handle a {
      border-color: $slider-disabled-color;
    }

    .#{$slider-prefix-cls}__track {
      background-color: $slider-disabled-color;
    }

    .#{$slider-prefix-cls}__handle-button {
      @include hover-focus{
        cursor: not-allowed;
        transform: scale(1);
      }
    }
  }

  //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);
  }

  //color
  @each $color,$value in $color-status {

    &--#{$color} {
      .#{$slider-prefix-cls}__track{
        @include bg-gradient(nth($value,2),nth($value,3));
      }

      .#{$slider-prefix-cls}__handle-button{
        border-color: nth($value,2);
      }

      @include hover-focus {
        .#{$slider-prefix-cls}__track {
          @include hover-gradient(nth($value,2),nth($value,3));
        }
        .#{$slider-prefix-cls}__handle-button{
          border-color: fade_out(nth($value,2),.2);
        }
      }

      @include status-disabled {
        .#{$slider-prefix-cls}__track {
          @include bg-gradient(nth($value,2),nth($value,3));
        }
      }
    }
  }
}