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

.form__item-label {
  font-weight: 600;
}

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

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

.form__item-input:where(:not([type="submit"])) {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: var(--space-xxs) 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 {
  border-color: var(--color-primary);
}

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

.form__item-error {
  color: var(--color-error);
  font-weight: 600;
}

.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);
}