@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;
  }

  .ui-form-field[data-layout="inline"] {
    inline-size: 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;

    max-inline-size: var(--form-control-width, none);

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

  .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;
    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: var(--control-height);
    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;
      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: var(--control-height);
      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;
      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: var(--control-height);
      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;
      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: var(--control-height);
      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;
      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: var(--control-height);
      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));
  }
}