.label-switch {
  $switch-width: 52px;
  $switch-padding: 2px;
  $switch-height: 32px;
  $switch-radius: $switch-height;
  $knob-size: $switch-height - ($switch-padding * 2);
  $knob-radius: $switch-height - ($switch-padding * 2);
  $knob-width: $knob-size;
  $switch-background: $base-background-color;
  $switch-border-background: darken($base-background-color, 9%);
  $switch-shadow: 0 2px 5px transparentize(black, 0.6);

  border-radius: $switch-radius;
  cursor: pointer;
  display: inline-block;
  height: $switch-height;
  margin-bottom: 0px;
  position: relative;
  width: $switch-width;

  .checkbox {
    background-color: $switch-border-background;
  }

  input[type="checkbox"] {
    display: none;

    + .checkbox {
      transition: all 0.3s ease;
      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);
        transform: scale(1);
        transition: all 0.3s ease;
        background-color: $switch-background;
        border-radius: $switch-radius;
        content: "";
        height: $knob-radius;
        width: $switch-width - ($switch-padding * 2);
        z-index: 1;
      }

      &:after {
        @include position(absolute, 2px 0 0 2px);
        transition: all 0.3s ease;
        @include size($knob-size);
        background-color: $switch-background;
        border-radius: $knob-radius;
        box-shadow: $switch-shadow;
        content: "";
        z-index: 2;
      }
    }

    &:checked {
      + .checkbox {

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

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