@mixin switch-normal($w: 60px, $h: 30px, $c: #529ef6, $margin: 5px) {
  $c-disabled: #777;

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

  label {
    cursor: pointer;
    text-indent: -9999px;
    width: $w;
    height: $h;
    background: $c-disabled;
    display: block;
    border-radius: $h;
    position: relative;

    &:after {
      content: "";
      position: absolute;
      top: $margin;
      left: $margin;
      width: $h - ($margin * 2);
      height: $h - ($margin * 2);
      background: #fff;
      border-radius: $h - ($margin * 2);
      transition: 0.3s;
    }

    &:hover {
      background: darken($c-disabled, 5%);
    }

    &:active {
      border-radius: $h - ($margin * 2);
      outline: $outline-active;
    }
  }

  input[type="checkbox"]:checked + label {
    background: $c;

    &:after {
      left: calc(100% - #{$margin});
      transform: translateX(-100%);
    }

    &:hover {
      background: darken($c, 5%);
    }
  }

  label:active:after {
    width: $h;
  }
}