.tn-slider
  display flex
  flex-direction column
  box-sizing border-box
  overflow-x hidden
  width 100%
  padding 10px 32px
  padding-top 18px
  &--disabled
    // opacity 0.4
  &__main
    display flex
    height 23px
    padding-top 13px
  &__inner
    position relative
    width 100%
    height 3px
    border-radius 6px
  &__slot
    &-left
      display flex
      align-items center
      justify-content center
      // min-width 36px
      padding-right 10px
      min-height 36px
      transform translate(0, -50%)
      color #7383a2
      font-size 12px
    &-right
      display flex
      padding-left 10px
      align-items center
      justify-content center
      // min-width 18px
      min-height 36px
      transform translate(0, -50%)
      color #7383a2
      font-size 12px
  &__bar
    position absolute
    height 3px
    border-top-left-radius 6px
    border-bottom-left-radius 6px
  &__btn
    position absolute
    z-index 2
    top -10px
    height 23px
    width 23px
    transform translate(-50%, 0)
    background-color transparent
    text-align center
    user-select none
    line-height normal
    border-radius 50%
  &__btn-inner
    width 7px
    height 7px
    border 8px solid transparent
    border-radius 50%
    transition .3s
    user-select none
    &:hover
      transform scale(1.1)
  &__stop
    position absolute
    top -2px
    width 7px
    height 7px
    border-radius 50%
    transform translate(-3.5px, 0)
  &__points
    position relative
    display flex
    align-items center
    height 24px
    // 两边文字居中展示
    &--center
      .tn-slider__point:first-child span
        left 0
        transform translate(-50%, 0)
      .tn-slider__point:last-child span
        right 0
        transform translate(50%, 0)
  &__point
    flex 2
    display flex
    align-items center
    justify-content center
    font-size 13px
    // opacity 0.7
    line-height: 6.4vw;
    span
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    &:first-child, &:last-child
      position relative
      flex 1
      height 24px
      line-height 24px
    &:first-child
      span
        text-align left
        position absolute
        left: -3.5px
    &:last-child
      span
        text-align right
        position absolute
        right: -3.5px
  &__point--active
    font-size 18px
    // font-weight bold
    opacity 1
  &__dots
    position relative
    display flex
    align-items center
    height 24px
    // 两边文字居中展示
    &--center
      .tn-slider__dot:first-child span
        transform translate(-50%, 0)
      .tn-slider__dot:last-child span
        transform translate(50%, 0)
  &__dot
    position absolute
    height 24px
    line-height 24px
    font-size 13px
    // opacity 0.7
    span
      display inline-block
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    &:first-child
      left 0
    &:last-child
      right 0
  &__dot--active
    position relative
    z-index 1
    font-size 17px
    // font-weight bold
    opacity 1
    span
      padding 0 5px
      background-color #fff
      transform translate(-50%, 0)
    .tn-slider__dot--onDark
      background-color rgb(23, 133, 251)