// colors
$blue: #269bff;
$bg-light: #f2f2f2;
$bg-med: #eee;

// the magic
div.checkbox.switcher,
div.radio.switcher {
  label {
    padding: 0;
    * {
      vertical-align: middle;
    }
    input {
      display: none;
      & + span {
        position: relative;
        display: inline-block;
        margin-right: 10px;
        width: 56px;
        height: 28px;
        background: $bg-light;
        border: 1px solid $bg-med;
        border-radius: 50px;
        transition: all 0.3s ease-in-out;
        small {
          position: absolute;
          display: block;
          width: 50%;
          height: 100%;
          background: #fff;
          border-radius: 50%;
          transition: all 0.3s ease-in-out;
          left: 0;
        }
      }
      &:checked + span {
        background: $blue;
        border-color: $blue;
        small {
          left: 50%;
        }
      }
    }
  }
}