@layer components {

  .ui-form-field-note {
    word-break: auto-phrase;
  }

  .ui-form-field-required {
    margin-inline-start: var(--space-inline-xs);
    color: hsl(var(--text-error));
  }

  .ui-form {
    display: flex;
    flex-direction: column;
  }

  .ui-form > * + * {
    margin-block-start: var(--form-block-gap);
  }

  .ui-form-field + .ui-form-field {
    margin-block-start: var(--form-field-row-gap);
  }

  .ui-responsive-grid > .ui-form-field + .ui-form-field {
    margin-block-start: 0;
  }

  .ui-responsive-grid:has(> .ui-form-field) {
    row-gap: var(--form-grid-row-gap);
    column-gap: var(--form-grid-column-gap);
  }

  .ui-responsive-grid > .ui-form-field {
    grid-column: auto;
  }

  @container responsive-grid (min-width: 40rem) {
    .ui-responsive-grid > .ui-form-field {
      grid-column: span min(var(--responsive-grid-sm, 1), var(--form-field-col-span, 1));
    }
  }
  @container responsive-grid (min-width: 48rem) {
    .ui-responsive-grid > .ui-form-field {
      grid-column: span min(var(--responsive-grid-md, 1), var(--form-field-col-span, 1));
    }
  }
  @container responsive-grid (min-width: 64rem) {
    .ui-responsive-grid > .ui-form-field {
      grid-column: span min(var(--responsive-grid-lg, 1), var(--form-field-col-span, 1));
    }
  }

  .ui-form-field {
    display: grid;
    gap: var(--field-label-gap);

    inline-size: 100%;

    align-self: start;

    --form-field-control-band: initial;
    --form-field-first-line: initial;
  }

  .ui-form-field[data-layout="inline"] {
    inline-size: auto;
  }

  .ui-form-field[data-layout="inline"] > .ui-form-field-control {
    inline-size: var(--form-control-width, auto);
  }

  .ui-form-field-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
  }

  .ui-form-field-control {
    display: grid;

    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-stack-xs);
    min-width: 0;

    min-height: var(--control-height);
    align-content: center;

    grid-template-rows: minmax(var(--form-field-control-band, auto), auto);
    align-items: center;
  }

  .ui-form-field-control > :not(.ui-form-field-note, .ui-form-feedback) {
    max-inline-size: var(--form-control-width, none);
  }

  .ui-form-field-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: inherit;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .ui-form-field-input > * {
    min-width: 0;
  }

  .ui-form-field-control:has(> .ui-form-field-note:first-child) {
    grid-template-rows: none;
  }

  .ui-form-field-control
    > fieldset:has(> :is(.ui-choice-group[data-orientation="vertical"], .ui-choice-field)) {
    align-self: start;
  }
  .ui-form-field-control
    > fieldset
    > :is(.ui-choice-group[data-orientation="vertical"], .ui-choice-field) {
    align-self: start;
    margin-block-start: max(
      0px,
      calc(
        (
            var(--form-field-control-band, 0px) - var(--font-size-base) *
              var(--control-label-line-height)
          ) /
          2
      )
    );
  }

  .ui-form-field:has(
    > .ui-form-field-control
      > fieldset
      > :is(.ui-control-multiline, [data-slot="textarea-affix-wrapper"])
  ) {
    --form-field-first-line: calc(
      var(--control-border-width, var(--stroke-hairline)) + var(--control-multiline-padding-block) +
        0.5lh
    );
  }

  .ui-form-field-control > * {
    min-width: 0;
  }

  .ui-form-field[data-collapse-below="false"]:is(
      [data-layout="horizontal"],
      [data-layout="inline"]
    ) {
    grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
    align-items: start;
    --form-field-control-band: var(--control-height);
    column-gap: var(--form-label-gap);
    row-gap: var(--space-stack-xs);
  }

  .ui-form-field[data-collapse-below="false"]:is([data-layout="horizontal"], [data-layout="inline"])
    > .ui-form-field-label {
    min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
    flex-wrap: wrap;
  }
  .ui-form-field[data-collapse-below="false"]:is([data-layout="horizontal"], [data-layout="inline"])
    > .ui-form-field-label
    > * {
    max-inline-size: 100%;
  }

  .ui-form-field[data-collapse-below="false"][data-layout="horizontal"]
    > .ui-form-field-control:first-child {
    grid-column-start: 2;
  }
  .ui-form-field[data-collapse-below="false"][data-label-align="end"]:is(
      [data-layout="horizontal"],
      [data-layout="inline"]
    )
    > .ui-form-field-label {
    justify-content: flex-end;
    text-align: end;
  }

  @media (min-width: 640px) {
    .ui-form-field[data-collapse-below="sm"]:is(
        [data-layout="horizontal"],
        [data-layout="inline"]
      ) {
      grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
      align-items: start;
      --form-field-control-band: var(--control-height);
      column-gap: var(--form-label-gap);
      row-gap: var(--space-stack-xs);
    }
    .ui-form-field[data-collapse-below="sm"]:is([data-layout="horizontal"], [data-layout="inline"])
      > .ui-form-field-label {
      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
      flex-wrap: wrap;
    }
    .ui-form-field[data-collapse-below="sm"]:is([data-layout="horizontal"], [data-layout="inline"])
      > .ui-form-field-label
      > * {
      max-inline-size: 100%;
    }
    .ui-form-field[data-collapse-below="sm"][data-layout="horizontal"]
      > .ui-form-field-control:first-child {
      grid-column-start: 2;
    }
    .ui-form-field[data-collapse-below="sm"][data-label-align="end"]:is(
        [data-layout="horizontal"],
        [data-layout="inline"]
      )
      > .ui-form-field-label {
      justify-content: flex-end;
      text-align: end;
    }
  }

  @media (min-width: 768px) {
    .ui-form-field[data-collapse-below="md"]:is(
        [data-layout="horizontal"],
        [data-layout="inline"]
      ) {
      grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
      align-items: start;
      --form-field-control-band: var(--control-height);
      column-gap: var(--form-label-gap);
      row-gap: var(--space-stack-xs);
    }
    .ui-form-field[data-collapse-below="md"]:is([data-layout="horizontal"], [data-layout="inline"])
      > .ui-form-field-label {
      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
      flex-wrap: wrap;
    }
    .ui-form-field[data-collapse-below="md"]:is([data-layout="horizontal"], [data-layout="inline"])
      > .ui-form-field-label
      > * {
      max-inline-size: 100%;
    }
    .ui-form-field[data-collapse-below="md"][data-layout="horizontal"]
      > .ui-form-field-control:first-child {
      grid-column-start: 2;
    }
    .ui-form-field[data-collapse-below="md"][data-label-align="end"]:is(
        [data-layout="horizontal"],
        [data-layout="inline"]
      )
      > .ui-form-field-label {
      justify-content: flex-end;
      text-align: end;
    }
  }

  @media (min-width: 1024px) {
    .ui-form-field[data-collapse-below="lg"]:is(
        [data-layout="horizontal"],
        [data-layout="inline"]
      ) {
      grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
      align-items: start;
      --form-field-control-band: var(--control-height);
      column-gap: var(--form-label-gap);
      row-gap: var(--space-stack-xs);
    }
    .ui-form-field[data-collapse-below="lg"]:is([data-layout="horizontal"], [data-layout="inline"])
      > .ui-form-field-label {
      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
      flex-wrap: wrap;
    }
    .ui-form-field[data-collapse-below="lg"]:is([data-layout="horizontal"], [data-layout="inline"])
      > .ui-form-field-label
      > * {
      max-inline-size: 100%;
    }
    .ui-form-field[data-collapse-below="lg"][data-layout="horizontal"]
      > .ui-form-field-control:first-child {
      grid-column-start: 2;
    }
    .ui-form-field[data-collapse-below="lg"][data-label-align="end"]:is(
        [data-layout="horizontal"],
        [data-layout="inline"]
      )
      > .ui-form-field-label {
      justify-content: flex-end;
      text-align: end;
    }
  }

  @media (min-width: 1280px) {
    .ui-form-field[data-collapse-below="xl"]:is(
        [data-layout="horizontal"],
        [data-layout="inline"]
      ) {
      grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
      align-items: start;
      --form-field-control-band: var(--control-height);
      column-gap: var(--form-label-gap);
      row-gap: var(--space-stack-xs);
    }
    .ui-form-field[data-collapse-below="xl"]:is([data-layout="horizontal"], [data-layout="inline"])
      > .ui-form-field-label {
      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
      flex-wrap: wrap;
    }
    .ui-form-field[data-collapse-below="xl"]:is([data-layout="horizontal"], [data-layout="inline"])
      > .ui-form-field-label
      > * {
      max-inline-size: 100%;
    }
    .ui-form-field[data-collapse-below="xl"][data-layout="horizontal"]
      > .ui-form-field-control:first-child {
      grid-column-start: 2;
    }
    .ui-form-field[data-collapse-below="xl"][data-label-align="end"]:is(
        [data-layout="horizontal"],
        [data-layout="inline"]
      )
      > .ui-form-field-label {
      justify-content: flex-end;
      text-align: end;
    }
  }

  .ui-form-feedback > svg {
    inline-size: var(--form-feedback-icon-size);
    block-size: var(--form-feedback-icon-size);
    flex-shrink: 0;
  }

  .ui-form-feedback[data-status="success"] {
    color: hsl(var(--text-success));
  }

  .ui-form-feedback[data-status="warning"] {
    color: hsl(var(--text-warning));
  }

  .ui-form-feedback[data-status="error"] {
    color: hsl(var(--text-error));
  }

  .ui-form-feedback[data-status="validating"] {
    color: hsl(var(--muted-foreground));
  }
}