.form__item + .form__item {
  margin-top: var(--space-m);
}

.form__item.hidden {
  display: none;
}

.form__item-label {
  font-weight: 600;
  text-transform: capitalize;
}

.form__item.boolean {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: var(--space-gap);
}

.form__item-input.boolean {
  width: revert;
}

.form__item-input:where(:not([type="submit"])) {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: var(--space-xxxs);
  border: var(--border);
  border-radius: var(--border-radius);
  outline: none;
  transition: box-shadow 250ms;

  &:focus {
    box-shadow: 0 0 0 2px var(--color-glint);
  }
}

.form__item-input--invalid,
form.validated .form__item input:invalid:not(input[type="checkbox"]),
form.validated .form__item select:invalid {
  border: 1px solid var(--color-error);
}

.form__item-hint,
.form__item-error {
  display: block;
}

.form__item-error {
  color: var(--color-error);
  font-weight: 500;
  font-size: var(--font-size-s);
}

.form__error-messages {
  margin: var(--space-m) auto var(--space-xl) auto;
  max-width: min(100%, 80ch);
  padding: var(--space-m) var(--space-s);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-xl);
  color: var(--color-error);
  background-color: var(--color-error-bg);
  border-color: var(--color-error);

  h4 {
    color: var(--color-error);
  }

  ul {
    padding-block-start: .5rem;
    padding-inline-start: 1.5rem;
  }
}