$toggle-width           = 42px
$toggle-height          = 24px
$toggle-span            = 2px
$toggle-handle-size     = $toggle-height - 2 * $toggle-span

.q-toggle-base
  transition all .45s cubic-bezier(.23, 1, .32, 1)
  width 100%
  height $toggle-height
  color white
  background-color currentColor
  border-radius 16px
  border 2px solid $grey-3

.q-toggle-handle
  background-color white
  border 1px solid $grey-3
  transition all 450ms cubic-bezier(.23, 1, .32, 1)
  border-radius 50%
  position absolute
  top $toggle-span
  left $toggle-span
  width $toggle-handle-size
  height $toggle-handle-size
  line-height $toggle-handle-size

.q-toggle .q-option-inner
  height $toggle-height
  width $toggle-width
  min-width $toggle-width
  &.active
    .q-toggle-base
      color currentColor
      border 0
    .q-toggle-handle
      left ($toggle-width - $toggle-handle-size - $toggle-span)