s-set-switch-size($width, $height)
  width $width
  height $height
  border-radius ($height / 2)
  & ^[0]-point
    width ($height - $switch-point-margin * 2)
    height @width
  & ^[0]-slot
    left $height
    width ($width - $height - $switch-point-margin)
    height $height
    line-height $height

s-set-switch-active-point($width, $height)
  & ^[0]-point
    left ($width - $height + $switch-point-margin)
  & ^[0]-slot
    left $switch-point-margin

.unf-switch
  display inline-block
  background-color $switch-bg
  transition background-color 0.2s
  position relative
  &-available
    cursor pointer
  &-active
    background-color $switch-active-bg
  &-point
    margin-top $switch-point-margin
    border-radius 50%
    background-color $switch-point-bg
    position absolute
    left $switch-point-margin
    transition left 0.25s
  &-disabled
    background-color $switch-bg-disabled
    & ^[0]-point
      background-color $switch-point-bg-disabled
  &-active&-disabled
    background-color $switch-active-bg-disabled
  &-slot
    transition left 0.25s
    overflow hidden
    position absolute
    color #ffffff
    text-align center
  &-small
    s-set-switch-size($switch-small-width, $switch-small-height)
  &-default
    s-set-switch-size($switch-middle-width, $switch-middle-height)
  &-large
    s-set-switch-size($switch-large-width, $switch-large-height)
  &-active&-small
    s-set-switch-active-point($switch-small-width, $switch-small-height)
  &-active&-default
    s-set-switch-active-point($switch-middle-width, $switch-middle-height)
  &-active&-large
    s-set-switch-active-point($switch-large-width, $switch-large-height)