
%switch
  $switch-height: 32px
  $switch-width: 80px

  $switch-inner-width: 36px
  $switch-inner-heigth: 26px

  .switch-inner
    display: inline-block
    width: $switch-width
    height: $switch-height
    margin-right: 1em
    padding: 3px 3px 3px 4px
    vertical-align: middle
    overflow: visible
    background-color: #E2E1E2
    border-radius: 4px
    border: none
    cursor: pointer
    span
      width: $switch-inner-width
      height: $switch-inner-heigth
      border-radius: 4px
      background-color: #A5A4A4
      color: $white
      text-align: center
      font-weight: 300
      font-size: 12px
      line-height: 2.2

  span
    display: inline-block
    vertical-align: middle
  
  .label
    vertical-align: middle
    font-size: $font-size-m
    color: $grey-medium
    display: inline-block
  &.label--small .label
    width: 7em
    font-size: 12px
    line-height: 1.3

  .on
    display: none
    margin-left: 0
  .off
    margin-left: 36px

  &.active
    .switch-inner
      background-color: #B8D6B9
      span
        background-color: #3BA85D
    .on
      display: inline-block
    .off
      display: none

  &.disabled
    cursor: default
    pointer-events: none
    opacity: .5


.switch
  @extend %switch

.switch--icon
  @extend %switch

  .on,
  .off
    text-indent: 99%;
    overflow: hidden;
    white-space: nowrap;
    background-size: 1.1em
    background-position: 50%
    background-repeat: no-repeat
  .off
    @extend %icon-hook-off
  .on
    @extend %icon-hook-on
