asi-switch {
  .base-component;

  label.input-label {
    color: @asi-switch-label-color;
  }

  button.switch {
    max-height: 22px;
    height: 22px;
    max-width: 40px;
    width: 40px;
    padding: 0;
    text-align: left;
    border-radius: 20px;
    background-color: @asi-switch-background-color;
    position: relative;
    outline: none;
    box-sizing: border-box;
    border: 1px solid transparent;

    :not([disabled]) {
      // border: 1px solid @asi-switch-color;
      background-color: @asi-switch-color;
    }

    &:focus {
      border: 1px solid orange;
    }

    .switch-button {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      border-radius: 18px;
      display: block;
      box-shadow: 0 0 1px grey;
      transition: left .2s ease-in-out;
      box-sizing: border-box;
    }

    &.checked {
      background-color: @asi-switch-checked-background-color;

      .switch-button {
        background-color: @asi-switch-checked-color;
        left: 19px;
      }
    }
  }
}