.label-switch {
  align-self: center;
  border-radius: $switch-radius;
  cursor: pointer;
  display: inline-block;
  height: $switch-height;
  position: relative;
  vertical-align: middle;
  width: $switch-width;
  input[type="checkbox"] {
    display: none;
    + .checkbox {
      @include transition(all 0.3s ease);
      background: #e5e5e5;
      border-radius: $switch-radius;
      border: none;
      cursor: pointer;
      height: $switch-height;
      margin: 0;
      padding: 0;
      position: relative;
      width: $switch-width;
      z-index: 0;

      &:before {
        @include position(absolute, 2px 0 0 2px);
        @include transform(scale(1));
        @include transition(all 0.3s ease);
        background: white;
        border-radius: $switch-radius;
        content: "";
        height: $knob-radius;
        width: 0px;
        z-index: 1;
      }

      &:after {
        @include position(absolute, 2px 0 0 2px);
        @include transition(all 0.3s ease);
        @include size($knob-size);
        background: white;
        border-radius: $knob-radius;
        box-shadow: 0 1px 3px rgba(black, 0.3);
        content: "";
        z-index: $base-z-index + 2;
      }
    }

    &:checked {
      + .checkbox {
        background: $brand;

        &:before {
          @include transform(scale(0));
        }

        &:after {
          left: $switch-width - $knob-width - ($switch-padding);
        }
      }
    }
  }
}