/*
Form check
 */
@use '../../config' as *;

// A `<label class="form-check">` that wraps its input is the click target
// itself, so it is only as wide as its content too.
label.form-check {
  width: fit-content;

  &.form-check-reverse {
    margin-inline-start: auto;
  }
}

.form-check {
  user-select: none;

  &.form-check-highlight .form-check-input:not(:checked) ~ .form-check-label {
    color: var(--secondary);
  }

  .form-check-label-off {
    color: var(--secondary);
  }

  .form-check-input:checked ~ .form-check-label-off {
    display: none;
  }

  .form-check-input:not(:checked) ~ .form-check-label-on {
    display: none;
  }
}

.form-check-input {
  margin-top: calc((#{$form-check-min-height} - var(--form-check-input-width)) / 2);
  background-size: var(--form-check-input-width);
  box-shadow: var(--form-check-box-shadow);
}

.form-check-label {
  --form-check-label-required-gap: #{$form-check-label-required-gap};

  display: block;
  width: fit-content;

  .form-check-reverse & {
    margin-inline-start: auto;
  }

  &.required {
    &::after {
      margin-inline-start: var(--form-check-label-required-gap);
      color: var(--red);
      content: '*';
    }
  }
}

.form-check-description {
  --form-check-description-margin-top: #{$form-check-description-margin-top};

  display: block;
  margin-top: var(--form-check-description-margin-top);
  font-size: $h5-font-size;
  color: var(--secondary);
}

.form-check-single {
  margin: 0;

  .form-check-input {
    margin: 0;
  }
}

/*
Form switch
 */
.form-switch {
  .form-check-input {
    height: var(--form-switch-height);
    margin-top: calc((#{$form-check-min-height} - var(--form-switch-height)) / 2);
    @include transition(background-color $transition-time, background-position $transition-time, $focus-ring-transition);

    // An off switch that is disabled fills its track like a disabled input,
    // so it no longer looks like an off switch that can still be toggled.
    &:disabled:not(:checked) {
      --form-switch-color: var(--form-switch-disabled-color);
      background-color: var(--form-switch-disabled-bg);
    }
  }
}

.form-switch-lg {
  --form-switch-lg-padding-start: #{$form-switch-lg-padding-start};
  --form-switch-lg-min-height: #{$form-switch-lg-min-height};
  --form-switch-lg-height: #{$form-switch-lg-height};
  --form-switch-lg-width: #{$form-switch-lg-width};
  --form-switch-lg-bg-size: #{$form-switch-lg-bg-size};
  --form-switch-lg-input-offset: #{$form-switch-lg-input-offset};
  --form-switch-lg-label-padding-top: #{$form-switch-lg-label-padding-top};
  min-height: var(--form-switch-lg-min-height);

  padding-inline-start: var(--form-switch-lg-padding-start);

  .form-check-input {
    --form-switch-knob-offset: 0.1875rem;
    --form-switch-knob-size: calc(var(--form-switch-lg-height) - var(--form-switch-knob-offset) * 2);
    width: var(--form-switch-lg-width);
    height: var(--form-switch-lg-height);
    margin-inline-start: var(--form-switch-lg-input-offset);
  }

  .form-check-label {
    padding-top: var(--form-switch-lg-label-padding-top);
  }
}