form {
  --gap-fieldset: 1rem;
  --gap-form: 0.5rem;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  gap: var(--gap-form) 0;
}

fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-fieldset);

  border: 0;
  margin: 0;
  padding: 0;
}

input,
textarea {
  padding: 0.5rem;
  border-radius: 0.5rem;
}

label {
  width: 100%;
}

input {
  height: 2rem;
}

textarea {
  resize: vertical;
  min-height: 4rem;
}

input[type="submit"] {
  /* Font-awesome documentation recommends using <i> when adding icons to a website.
   * By using this workaround, icons can be placed inside a form submit input rather than
   * a <button>/<i> combo. */
  /* Stackoverflow: how to insert font-awesome icon into form submit input
   * https://stackoverflow.com/questions/48042213/how-to-use-fontawesome-icon-as-submit-button-in-html-form */
  font-family: var(--font-secondary), var(--fa-family-classic);
}

input[required]~label::after,
textarea[required]~label::after {
  content: "*";
  color: var(--color-alert);
  padding-left: 0.125rem;
}

.form__input-group {
  display: flex;

  flex-direction: column;
  flex-wrap: wrap;
  align-content: start;

  flex-shrink: 1;
}

.form__input-group label {
  max-width: fit-content;
  height: fit-content;
  order: -10;
}

.form__input-group:focus-within label {
  font-weight: bold;
}

.form__input-group--full {
  width: 100%;
}

.form__input-group--full label,
.form__input-group--full input,
.form__input-group--full textarea {
  min-width: 100%;
}