css toggle switch - togglebox 2.0

example.html

<input checked="checked" class="switch" id="switch-1" name="switch-1" type="checkbox" value="1">
<label for="switch-1">switch next to label</label>

<input checked="checked" class="switch bottom" id="switch-2" name="switch-2" type="checkbox" value="1">
<label for="switch-2">switch below to label</label>

switch.sass

$switch-width: 50px
$switch-height: 20px
$switch-handle-width: 25px
$switch-on-bg-color: #49D585
$switch-off-bg-color: #D0D0D0

input.switch
  margin-left: -999em

  & ~ label
    position: relative
    text-indent: $switch-width + 10px
    user-select: none

    &:before, &:after
      content: " "
      height: $switch-height
      left: 0
      position: absolute
      border-radius: 23px
    &:before
      width: $switch-width
      background: $switch-off-bg-color
      +box-shadow( inset -1px 1px 0px 0px rgba(20,119,62,0.39) )
    &:after
      top: 0px
      width: $switch-handle-width
      border-radius: 29px
      background: #F4F4F4
      border: 1px solid #AFAFAF
      height: 18px
      +box-shadow( 1px 1px 0px 0px rgba(140,140,140,0.50) )
      +transition(all 100ms ease-in)
  &:checked ~ label
    &:before
      background: $switch-on-bg-color
    &:after
      left: $switch-handle-width
      +box-shadow( -1px 1px 0px 0px rgba(140,140,140,0.50) )
  &.bottom ~ label
    text-indent: 0
    padding-bottom: $switch-height + 20px
    &:before, &:after
      top: $switch-height + 10px