.ffwdSwitch
  position: relative
  display: inline-block
  width: 30px
  height: 20px
  border-radius: (@height / 2)
  background: alpha($secondary, .5)
  transition: transit('background')
  &.preserveBackground
    background: $secondary
  &.active
    background: $secondary
    > .toggle
      transform: translate3d(10px, 0, 0)

  > .toggle
    position: absolute
    top: 0
    bottom: @top
    left: 2px
    width: 16px
    height: @width
    border-radius: 50%
    margin: auto 0
    transform: translate3d(0, 0, 0)
    transition: transitTransform()
    &::before
      content: ''
      display: block
      width: 100%
      height: @width
      border-radius: inherit
      background: white
      $commonBoxShadow()
      transform: scale3d(1, 1, 1)
      transition: transitTransform()
    &.touched::before
      transform: scale3d(.85, .85, 1)

  > .input
    cursor: pointer
    position: absolute
    top: 0
    right: @top
    margin: 0
    width: 100%
    height: @width
    border-radius: inherit
    opacity: 0