:root {
  --checkbox-border-color-invalid: var(--error-color);
  --checkbox-border-color: var(--form-color);
  --checkbox-border-radius: var(--form-border-radius);
  --checkbox-border-width: 2px;
  --checkbox-color-invalid: var(--required-color);
  --checkbox-focus-outline-color: var(--form-focus-color);
  --checkbox-focus-outline-width: 3px;
  --checkbox-font-size: var(--font-size-default);
  --checkbox-gap: 1.5rem;
  --checkbox-icon-color: var(--form-color);
  --checkbox-line-height: 2.2rem;
  --checkbox-required-color: var(--required-color);
  --checkbox-size: 2.8rem;
  --checkbox-text-color: var(--text-color);
}

.checkbox {
  cursor: pointer;
  display: flex;
  gap: var(--checkbox-gap);
  position: relative;
}

.checkbox--disabled {
  cursor: default;
  opacity: 0.5;
}

.checkbox__input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;

  &:focus {
    outline: 0;
  }
}

.checkbox__icon {
  --focus-outline-offset: 0;
  --focus-outline-width: var(--checkbox-focus-outline-width);
  --focus-outline-color: var(--checkbox-focus-outline-color);

  align-items: center;
  block-size: var(--checkbox-size);
  border: var(--checkbox-border-width) solid var(--checkbox-border-color);
  border-radius: var(--checkbox-border-radius);
  color: transparent;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  font-size: calc(var(--checkbox-size) / 2);
  inline-size: var(--checkbox-size);
  justify-content: center;
  transition-property: border-color, color;
  user-select: none;

  .checkbox__input[aria-invalid='true'] ~ & {
    border-color: var(--checkbox-border-color-invalid);
  }

  .checkbox__input:checked ~ & {
    color: var(--checkbox-icon-color);
  }

  .checkbox__input:focus ~ & {
    border-color: var(--checkbox-border-color);

    @include use-focus-outline();
  }
}

.checkbox__label {
  color: var(--checkbox-text-color);
  font-size: var(--checkbox-font-size);
  line-height: var(--checkbox-line-height);
  margin-block-start: calc((var(--checkbox-size) - var(--checkbox-line-height)) / 2);
  text-align: start;
}

.checkbox__required {
  color: var(--checkbox-required-color);
  cursor: help;
  display: inline-block;
  font-weight: var(--font-weight-bold);
  margin-inline-start: 0.5rem;
}