switch {
  .switch {
    cursor: pointer;

    .tick {
      width: 40px;
      height: 12px;
      display: block;
      border-radius: 10px;
      background: $neutral-grey;
      position: relative;
      overflow: visible;
      margin: 5px;

      &:before {
        content: " ";
        width: 20px;
        height: 20px;
        left: 0;
        display: block;
        background: $white;
        border-radius: 50%;
        position: absolute;
        top: -4px;
        box-shadow: 0 1px 1px $shadow;
        margin-right: 0;
        margin-top: 0;
        border: none;
      }
    }

    input[type="checkbox"]:checked + .tick {
      background: $primary-light;
      &:before {
        left: 20px;
        background: $primary-dark;
      }
    }

    input[type="checkbox"]:disabled + .tick {
      background: $disabled-color;

      &:before {
        background: $disabled-color;
      }
    }

    input[type="checkbox"]:disabled:checked + .tick {
      background: $primary-lighter;

      &:before {
        background: $primary-lighter;
      }
    }
  }
}