@layer components {
    .async-select {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--pad-sm);
        border: var(--border-thickness-base) solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-background-surface);
        transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }

    .async-select select {
        min-width: 18rem;
    }

    .async-select.is-saving,
    .async-select.saving {
        background: var(--color-background-saving);
        box-shadow: inset 0 0 0 var(--border-thickness-base) color-mix(in srgb, var(--color-primary) 40%, #0000);
    }

    .async-select.is-saved,
    .async-select.saved {
        background: var(--color-background-saved);
    }

    .async-select.has-error,
    .async-select.error {
        background: var(--color-background-error);
        border-color: var(--color-feedback-danger);
        box-shadow: 0 0 0 1px var(--color-feedback-danger);
    }

    .async-select__status {
        min-height: 1.25rem; /* keeps row height steady when messages appear */
    }
}