Form

/* flex-form — USWDS Form conformance
   Base: max-width 32em (matches usa-form), proper child spacing
   Large variant: data-size="large" — max-width 46rem (matches usa-form--large) */

.flex-form {
  font-size: var(--flex-text-uswds);
  line-height: 1.3;
  /* stylelint-disable-next-line declaration-property-value-allowed-list -- USWDS usa-form intrinsic width. */
  max-inline-size: 32em;

  &[data-size="large"] {
    /* stylelint-disable-next-line declaration-property-value-allowed-list -- USWDS usa-form--large intrinsic width. */
    max-inline-size: 46rem;
  }

  /* Inputs within the form take full width */
  :where(.flex-input, .flex-textarea, .flex-select) {
    max-inline-size: none;
  }

  /* Button spacing within forms */
  .flex-button {
    margin-block-start: 1.5rem;
  }

  /* Abbreviation styling for required markers */
  abbr[title="required"] {
    text-decoration: none;
  }

  /* Form group spacing */
  .flex-form-group {
    margin-block-start: 1rem;

    .flex-label:first-child {
      margin-block-start: 0;
    }

    /* Form group error state */
    &[data-state="error"] {
      border-inline-start: 0.25rem solid var(--flex-color-error);
      padding-inline-start: 1rem;
      position: relative;
      margin-inline-start: -1.25rem;
    }
  }

  /* Zero out label margin-top within form — stack gap handles between-field spacing */
  .flex-label {
    margin-block-start: 0;
  }

  /* Fieldset reset within forms */
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

  /* Fieldset separation — generous spacing between sections */
  fieldset + fieldset {
    margin-block-start: var(--flex-space-xl);
  }

  legend {
    font-size: 1.34rem;
    font-weight: 700;
    padding: 0;
    margin-block-end: 0.5rem;
  }
}