// Form defaults.

form {
  // Add vertical rhythm margins.
  @include margin-block(0 1);
}

input,
textarea,
select {
  @include margin-block(0 1);
}

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.
@include respond-to(s) {
  input:only-of-type {
    &:has(+ [type='submit']) {
      margin-inline-end: .5rem;
    }
  }
}