.switch {
  display: inline-block;
  line-height: 3em;

  * {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  label {
    cursor: pointer;
    font-size: .8rem;
    color: #9e9e9e;

    .lever {
      content: "";
      display: inline-block;
      position: relative;
      width: 16px;
      height: 10px;
      background-color: #ddd;
      border-radius: 15px;
      -webkit-transition: background 0.3s ease;
      transition: background 0.3s ease;
      vertical-align: middle;
      margin: 0 16px;

      &:before {
        background-color: rgba(38,166,154,0.15);
      }

      &:after {
        background-color: #888;
        box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0 rgba(0,0,0,0.14), 0px 1px 5px 0 rgba(0,0,0,0.12);
      }

      &:before,
      &:after {
        content: "";
        position: absolute;
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        left: -10px;
        top: -3px;
        transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
      }
    }

    [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    input[type=checkbox] {
      opacity: 0;
      width: 0;
      height: 0;

      &:checked + .lever {

        &:before,
        &:after {
          left: 10px;
        }
      }
    }
  }

  &:not(.disabled) {

    input[type=checkbox] {

      &:checked + .lever {
        background-color: #ffd3af;

        &:after {
          background-color: #ff7200;
        }
      }
    }
  }
}