.switch {
  @extend %unselectable;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative;
  margin-right: 0.5em;

  & + .switch:last-child {
    margin-right: 0;
  }

  input[type=checkbox] {
    position: absolute;
    left: 0;
    opacity: 0;
    outline: none;
    z-index: -1;

    + .check {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      width: $switch-width;
      height: #{$switch-width * .5 + $switch-padding};
      padding: $switch-padding;
      background: $grey-light;
      border-radius: $radius;
      transition: background $speed-slow $easing, box-shadow $speed-slow $easing;
      @each $name, $pair in $colors {
        $color: nth($pair, 1);
        &.is-#{$name}-passive, &:hover {
          background: $color;
        }
        &.input[type=checkbox] + &.check {
          background: 'pink';
        }
      }

      &:before {
        content: "";
        display: block;
        border-radius: $radius;
        width: #{($switch-width - $switch-padding * 2) * .5};
        height: #{($switch-width - $switch-padding * 2) * .5};
        background: $background;
        transition: transform $speed-slow $easing;
        will-change: transform;
        transform-origin: left;
        @if $switch-knob-has-shadows == 1 {
          box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
        }
      }

      &.is-elastic:before {
        transform: scaleX(1.5);
        border-radius: $radius;
      }
    }

    &:checked + .check {
      background: $switch-active-background-color;
      @each $name, $pair in $colors {
        $color: nth($pair, 1);
        &.is-#{$name} {
          background: $color;
        }
      }

      &:before {
        transform: translate3d(100%, 0, 0);
      }

      &.is-elastic:before {
        // Might be a little offset if base font is not 16px
        transform: translate3d(50%, 0, 0) scaleX(1.5);
      }
    }

    &:focus, &:active {
      outline: none;

      + .check {
        @if $switch-has-shadows == 1 {
          box-shadow: 0 0 0.5em rgba($grey, 0.6);
        }
        @each $name, $pair in $colors {
          $color: nth($pair, 1);
          @if $switch-has-shadows == 1 {
            &.is-#{$name}-passive {
              box-shadow: 0 0 0.5em rgba($color, 0.8);
            }
          }
        }
      }

      &:checked + .check {
        @if $switch-has-shadows == 1 {
          box-shadow: 0 0 0.5em rgba($switch-active-background-color, 0.8);
        }
        @each $name, $pair in $colors {
          $color: nth($pair, 1);
          @if $switch-has-shadows == 1 {
            &.is-#{$name} {
              box-shadow: 0 0 0.5em rgba($color, 0.8);
            }
          }
        }
      }
    }
  }

  .control-label {
    padding-left: 0.5em;
  }

  &:hover {
    input[type=checkbox] + .check {
      background: rgba($grey-light, 0.9);
      @each $name, $pair in $colors {
        $color: nth($pair, 1);
        &.is-#{$name}-passive {
          background: rgba($color, 0.9);
        }
      }
    }

    input[type=checkbox]:checked + .check {
      background: rgba($switch-active-background-color, 0.9);
      @each $name, $pair in $colors {
        $color: nth($pair, 1);
        &.is-#{$name} {
          background: rgba($color, 0.9);
        }
      }
    }
  }

  &.is-rounded {
    input[type=checkbox] {
      + .check {
        border-radius: $radius-rounded;

        &:before {
          border-radius: $radius-rounded;
        }
      }

      &.is-elastic:before {
        transform: scaleX(1.5);
        border-radius: $radius-rounded;
      }
    }
  }

  &.is-outlined {
    input[type=checkbox] {
      + .check {
        background: transparent;
        border: .1rem solid $grey-light;
        padding: $switch-outlined-padding;
        @each $name, $pair in $colors {
          $color: nth($pair, 1);
          &.is-#{$name}-passive {
            border: .1rem solid rgba($color, 0.9);

            &:before {
              background: $color
            }

            &:hover {
              border-color: rgba($color, 0.9);
            }
          }
        }

        &:before {
          background: $grey-light;
        }
      }

      &:checked + .check {
        border-color: $switch-active-background-color;
        @each $name, $pair in $colors {
          $color: nth($pair, 1);
          &.is-#{$name} {
            background: transparent;
            border-color: $color;

            &:before {
              background: $color;
            }
          }
        }

        &:before {
          background: $switch-active-background-color;
        }
      }
    }

    &:hover {
      input[type=checkbox] + .check {
        background: transparent;
        border-color: rgba($grey-light, 0.9);
      }

      input[type=checkbox]:checked + .check {
        background: transparent;
        border-color: rgba($switch-active-background-color, 0.9);
        @each $name, $pair in $colors {
          $color: nth($pair, 1);
          &.is-#{$name} {
            border-color: rgba($color, 0.9);
          }
        }
      }
    }
  }

  &.is-small {
    @include control-small;
  }

  &.is-medium {
    @include control-medium;
  }

  &.is-large {
    @include control-large;
  }

  &[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    color: $grey;
  }
}