/* Form defaults. */

form {
  /* Add vertical rhythm margins. */
  margin-block: 0 var(--spacing-m);
}

input,
textarea,
select {
  margin-block: 0 var(--spacing-m);
}

label {
  font-weight: var(--fw-bold);

  /* Display as block if before input. */
  &:has(+ input),
  &:has(+ textarea){
    display: block;
  }

  /* Mark field as required if needed. */
  &:has(+ :required) {
    &::after {
      content: '*';
      color: var(--color-mark-highlight);
    }
  }
}

/* Valid and invalid state. */
input,
textarea {
  &:user-valid {
    border-color: var(--color-success);
    border-style: solid;
    background-color: var(--color-success-bg);
  }

  &:focus:user-valid {
    border-color: transparent;
  }

  &:user-invalid {
    border-color: var(--color-error);
    border-style: solid;
    background-color: var(--color-error-bg);
  }

  &:focus:user-invalid {
    border-color: transparent;
    background-color: var(--color-warning-bg);
  }
}

/* Set max text line width for readability. */
input,
label,
textarea,
select {
  max-width: var(--max-line-width);
}

fieldset {
  border: 1px solid var(--color-border);
}

/* Make field where you enter more info a bit wider. */
[type='email'],
[type='password'],
[type='range'],
[type='search'],
[type='url'] {
  /* Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()". */
  /* stylelint-disable-next-line function-name-case */
  width: Min(20em, 100%);
}

/* Make field where you enter more info a bit wider. */
[type='text'],
textarea {
  /* Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()". */
  /* stylelint-disable-next-line function-name-case */
  width: Min(30em, 100%);
}

/* Make sure textareas without a rows attribute are not tiny. */
textarea:not([rows]) {
  min-height: 7lh;
}

/* For forms with multibple fields show submit button below the form. */
input:not(:only-of-type),
textarea {
  & + [type='submit'] {
    display: block;
  }
}

/* For forms on mobile with single field add space between it and the submit button. */
@media (min-width: 666px) {
  input:only-of-type {
    &:has(+ [type='submit']) {
      margin-inline-end: .5rem;
    }
  }
}