lesscss-percentage(n)
  (n * 100)%
$rcs-prefixClass = rc-slider
$rcs-disabledColor = rgb(204, 204, 204, 1)
$rcs-border-radius-base = 6px
$rcs-primary-color = $bz-blue
$rcs-tooltip-color = rgb(255, 255, 255, 1)
$rcs-tooltip-bg = tint(rgb(102, 102, 102, 1), 4%)
$rcs-tooltip-arrow-width = 4px
$rcs-tooltip-distance = ($rcs-tooltip-arrow-width + 4)
$rcs-tooltip-arrow-color = $rcs-tooltip-bg
$rcs-ease-out-quint = cubic-bezier(0.23, 1, 0.32, 1)
$rcs-ease-in-quint = cubic-bezier(0.755, 0.05, 0.855, 0.06)
rcs-borderBox()
  box-sizing border-box
  -webkit-tap-highlight-color rgba(0, 0, 0, 0)
  *
    box-sizing border-box
    -webkit-tap-highlight-color rgba(0, 0, 0, 0)
.rcs-borderBox
  rcs-borderBox()
.{$rcs-prefixClass}
  position relative
  height 4px
  width 100%
  background-color $bz-grey--dark
  cursor pointer
  @extend .rcs-borderBox
  &-track
    position absolute
    left 0
    height 4px
    background-color $rcs-primary-color
    z-index 1
  &-handle
    position absolute
    margin-left -7px
    margin-top -6px
    width 15px
    height 15px
    cursor pointer
    border-radius 50%
    background-color #fff
    z-index 2
    &:hover
      boxShadow()
    &-active
      border solid 2px $rcs-primary-color
      &:active
        border-color $rcs-primary-color
        box-shadow 0 0 5px tint($rcs-primary-color, 20%)
  &-mark
    position absolute
    top 10px
    left 0
    width 100%
    font-size 12px
    z-index 3
  &-mark-text
    position absolute
    display inline-block
    vertical-align middle
    text-align center
    cursor pointer
    color #999
    &-active
      color #666
  &-step
    position absolute
    width 100%
    height 4px
    background transparent
    z-index 1
//   &-dot
//     position absolute
//     bottom -2px
//     margin-left -4px
//     width 8px
//     height 8px
//     border 2px solid #e9e9e9
//     background-color #fff
//     cursor pointer
//     border-radius 50%
//     vertical-align middle
//     &:first-child
//       margin-left -4px
//     &:last-child
//       margin-left -4px
//     &-active
//       border-color tint($rcs-primary-color, 50%)
//   &-disabled
//     background-color #e9e9e9
//     .{$rcs-prefixClass}-track
//       background-color $rcs-disabledColor
//     .{$rcs-prefixClass}-handle, .{$rcs-prefixClass}-dot
//       border-color $rcs-disabledColor
//       background-color #fff
//       cursor not-allowed
//     .{$rcs-prefixClass}-mark-text, .{$rcs-prefixClass}-dot
//       cursor not-allowed !important
// .{$rcs-prefixClass}-vertical
//   width 4px
//   height 100%
//   .{$rcs-prefixClass}
//     &-track
//       bottom 0
//       width 4px
//     &-handle
//       position absolute
//       margin-left -5px
//       margin-bottom -7px
//     &-mark
//       top 0
//       left 10px
//       height 100%
//     &-step
//       height 100%
//       width 4px
//     &-dot
//       left 2px
//       margin-bottom -4px
//       &:first-child
//         margin-bottom -4px
//       &:last-child
//         margin-bottom -4px
// motion-common()
//   animation-duration .3s
//   animation-fill-mode both
//   display block !important
// .motion-common
//   motion-common()
// make-motion(className, keyframeName)
//   .className-enter, .className-appear
//     @extend .motion-common
//     animation-play-state paused
//   .className-leave
//     @extend .motion-common
//     animation-play-state paused
//   .className-enter.className-enter-active, .className-appear.className-appear-active
//     animation-name unquote("" + keyframeName + "In")
//     animation-play-state running
//   .className-leave.className-leave-active
//     animation-name unquote("" + keyframeName + "Out")
//     animation-play-state running
// zoom-motion(className, keyframeName)
//   make-motion(className, keyframeName)
//   .className-enter, .className-appear
//     transform scale(0, 0)
//     animation-timing-function $rcs-ease-out-quint
//   .className-leave
//     animation-timing-function $rcs-ease-in-quint
// zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown)
// @keyframes rcSliderTooltipZoomDownIn
//   0%
//     opacity 0
//     transform-origin 50% 100%
//     transform scale(0, 0)
//   100%
//     transform-origin 50% 100%
//     transform scale(1, 1)
// @keyframes rcSliderTooltipZoomDownOut
//   0%
//     transform-origin 50% 100%
//     transform scale(1, 1)
//   100%
//     opacity 0
//     transform-origin 50% 100%
//     transform scale(0, 0)
// .rc-tooltip
//   position absolute
//   left -9999px
//   top -9999px
//   z-index 4
//   visibility visible
//   @extend .rcs-borderBox
//   &-hidden
//     display none
//   &-placement-top
//     padding $rcs-tooltip-arrow-width 0 $rcs-tooltip-distance 0
//   &-inner
//     padding 6px 2px
//     min-width 24px
//     height 24px
//     font-size 12px
//     line-height 1
//     color $rcs-tooltip-color
//     text-align center
//     text-decoration none
//     background-color $rcs-tooltip-bg
//     border-radius $rcs-border-radius-base
//     box-shadow 0 0 4px #d9d9d9
//   &-arrow
//     position absolute
//     width 0
//     height 0
//     border-color transparent
//     border-style solid
//   &-placement-top &-arrow
//     bottom ($rcs-tooltip-distance - $rcs-tooltip-arrow-width)
//     left 50%
//     margin-left - $rcs-tooltip-arrow-width $rcs-tooltip-arrow-width
//     border-width $rcs-tooltip-arrow-width $rcs-tooltip-arrow-width 0
//     border-top-color $rcs-tooltip-arrow-color