/* ===================================================
/* FORM (SWITCHES)
/* ===================================================

// ====================================
// MIXINS
// ====================================
=create-switch
  position: relative
  display: inline-block
  width: $switch-width
  height: $switch-height
  vertical-align: center
  border-radius: $switch-border-radius
  // Elements
  &-toggle
    position: absolute
    display: none
    opacity: 0
    // Pseudo
    &:checked
      // Elements
      ~ .switch-handle
        transform: translateX(100%)
      ~ .switch-label
        background: $color-primary
        border-color: darken($color-primary, $darken * 2)
    &:disabled
      // Elements
      ~ .switch-handle
        opacity: $opacity-muted
        user-select: none
        cursor: not-allowed
      ~ .switch-label
        opacity: $opacity-muted
  &-handle
    position: absolute
    top: 0
    left: 0
    width: $switch-width / 2
    height: $switch-width / 2
    background: $color-light
    border: 1px solid darken($color-light, $darken * 2)
    border-radius: 50%
    transition: transform $transition-time
  &-label
    position: relative
    display: block
    height: inherit
    background: $color-default
    border: 1px solid darken($color-default, $darken * 2)
    border-radius: inherit

// ====================================
// SWITCH
// ====================================
.switch
  +create-switch