@import '../variables';

.itf-checkbox, .itf-radio {

  .form-check-input {
    --checkbox-border-color: #d0d4dc;
    --bs-form-check-bg: #f5f6f8;
    border-color: var(--checkbox-border-color);
  }
}

.itf-checkbox {
  .form-check-input, .form-check-label {
    cursor: pointer;
  }
  &__large.form-check {
    padding-left: $form-check-padding-start * 2;
    min-height: 2.5rem;

    .form-check-label {
      padding-top: 0.25rem;
    }
    .form-check-input {
      margin-top: 0;
      width: $form-check-input-width * 2;
      height: $form-check-input-width * 2;
      margin-left: -$form-check-padding-start * 2;
      border-radius: 0.75rem;
    }
    &.form-switch {
      padding-left: $form-switch-padding-start * 2;

      .form-check-input {
        width: $form-switch-width * 2;
        margin-left: -$form-switch-padding-start * 2;
        border-radius: 100px;
      }
    }
  }
  &__medium.form-check {
    padding-left: $form-check-padding-start * 1.5;
    min-height: 2rem;

    .form-check-input {
      margin-top: 0;
      width: $form-check-input-width * 1.5;
      height: $form-check-input-width * 1.5;
      margin-left: -$form-check-padding-start * 1.5;
      border-radius: 0.5rem;
    }
    &.form-switch {
      padding-left: $form-switch-padding-start * 1.5;

      .form-check-input {
        width: $form-switch-width * 1.5;
        margin-left: -$form-switch-padding-start * 1.5;
        border-radius: 100px;
      }
    }
  }
}

.itf-radio {
  .form-check-input, .form-check-label {
    cursor: pointer;
  }
  &__large.form-check {
    padding-left: $form-check-padding-start * 2;
    min-height: 2.5rem;

    .form-check-label {
      padding-top: 0.25rem;
    }
    .form-check-input {
      margin-top: 0;
      width: $form-check-input-width * 2;
      height: $form-check-input-width * 2;
      margin-left: -$form-check-padding-start * 2;
    }
  }
  &__medium.form-check {
    padding-left: $form-check-padding-start * 1.5;
    min-height: 2rem;

    .form-check-input {
      margin-top: 0;
      width: $form-check-input-width * 1.5;
      height: $form-check-input-width * 1.5;
      margin-left: -$form-check-padding-start * 1.5;
    }
  }
}
