@import "../main.css";

@layer components {
  .text-input [data-scope="text-input"][data-part="root"] {
    @apply ui-root;

    gap: var(--spacing-mini-gap);
    max-width: var(--container-ui);
  }

  .text-input [data-scope="text-input"][data-part="label"] {
    @apply ui-label;
  }

  .text-input [data-scope="text-input"][data-part="input"] {
    @apply ui-input;

    max-width: var(--container-mini);
  }

  .text-input [data-scope="text-input"][data-part="error"] {
    @apply ui-error;
  }
}