/* Manifest Combobox */

@layer base, components, utilities;

@layer components {

    /* Wrapper */
    :where(.combobox):not(.unstyle) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing, 0.25rem);
        width: 100%;
        max-width: 100%;
        min-height: var(--spacing-field-height, 2.25rem);
        padding: calc(var(--spacing, 0.25rem) * 1.25) var(--spacing-field-padding, 0.625rem);
        color: var(--color-field-inverse, oklch(43.9% 0 0));
        background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        border-radius: var(--radius, 0.5rem);
        transition: var(--transition);
        cursor: text;

        &:hover:has(> :where(input:not([type=hidden]), textarea, button):not([hidden])) {
            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
        }

        &:not(:has(> :where(input:not([type=hidden]), textarea, button):not([hidden]))) {
            cursor: default
        }

        &:focus-within {
            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
            box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 30%, transparent)
        }

        &:has(.combobox-chip) {
            padding-inline: calc(var(--spacing, 0.25rem) * 1.25)
        }

        /* Plugin-set from render(), so it tracks any editor type — including a
           <button> editor, which the old :has(> input:disabled) rule missed. */
        &[data-disabled] {
            opacity: .5;
            pointer-events: none;
            cursor: default;

            /* The × stays (layout), inert — the field is already dimmed as a whole,
               so don't let the global :disabled dimming stack on top of it. */
            .combobox-chip>button:disabled {
                opacity: 1;
                cursor: default
            }
        }

        /* Inner typing surface */
        &> :where(input:not([type=hidden]), textarea):not(.unstyle) {
            flex: 1 1 7rem;
            min-width: 0;
            width: auto;
            height: auto;
            margin: 0;
            padding: 0;
            color: inherit;
            background: transparent;
            field-sizing: content;

            &:hover,
            &:focus-visible {
                background: transparent;
                box-shadow: none
            }
        }

        &>textarea {
            resize: none
        }
    }

    /* Chips */
    :where(.combobox-chip):not(.unstyle) {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: var(--spacing, 0.25rem);
        max-width: 100%;
        height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
        margin: 0;
        padding: 0;
        padding-inline-start: calc(var(--spacing, 0.25rem) * 2);
        font-size: 0.875rem;
        line-height: normal;
        /* Optional per-field/global override: set --combobox-chip-surface / -content */
        color: var(--combobox-chip-content, var(--color-content-stark, oklch(43.9% 0 0)));
        background-color: var(--combobox-chip-surface, var(--color-popover-surface, oklch(100% 0 0)));
        border: 0;
        border-radius: calc(var(--radius, 0.5rem) * 0.7);
        overflow: hidden;
        user-select: none;

        /* Label */
        &>span {
            min-width: 0;
            margin: 0;
            padding: 0;
            border: 0;
            font: inherit;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        /* Remove button */
        &>button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            flex: none;
            width: auto !important;
            min-width: 0;
            max-width: none;
            height: 100%;
            min-height: 0;
            aspect-ratio: 1 / 1;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            font-size: 1em;
            line-height: 1;
            color: var(--combobox-chip-content, var(--color-content-neutral, oklch(43.9% 0 0)));
            background: transparent;
            box-shadow: none;
            cursor: pointer;

            &:hover {
                color: var(--combobox-chip-content, var(--color-content-stark, oklch(43.9% 0 0)));
                background: color-mix(in oklch, var(--combobox-chip-content, var(--color-content-stark, oklch(43.9% 0 0))) 12%, transparent)
            }
        }

        /* Non-removable */
        &[data-locked] {
            padding-inline-end: calc(var(--spacing, 0.25rem) * 2);
            cursor: default
        }

        /* Failed validation */
        &[aria-invalid="true"] {
            color: var(--color-negative-inverse, oklch(44.4% 0.177 26.899));
            background-color: var(--color-negative-surface, oklch(80.8% 0.114 19.571))
        }
    }

    /* Button trigger */
    :where(.combobox)>button:not(.unstyle) {
        flex: 1 1 auto;
        align-self: stretch;
        min-width: 7rem;
        justify-content: flex-start;
        gap: var(--spacing, 0.25rem);
        height: auto;
        min-height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
        padding: 0;
        color: inherit;
        background: transparent;
        cursor: pointer;

        &:hover {
            background: transparent
        }

        /* Caret */
        &::after {
            content: '';
            flex: none;
            width: 1em;
            height: 1em;
            margin-inline-start: auto;
            background-color: var(--color-content-subtle, oklch(55.6% 0 0));
            mask: var(--icon-chevron-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E")) center / contain no-repeat
        }
    }

    /* Chip-less */
    :where(.combobox):has(> :where(input:not([type=hidden]), textarea, button):not(.unstyle)):not(:has(.combobox-chip)) {
        padding: 0;

        &> :where(input:not([type=hidden]), textarea, button):not(.unstyle) {
            align-self: stretch;
            min-height: var(--spacing-field-height, 2.25rem);
            padding: calc(var(--spacing, 0.25rem) * 1.25) var(--spacing-field-padding, 0.625rem)
        }
    }

    /* Listbox */
    :where(menu[role=listbox]):not(.unstyle) {

        /* Active descendant */
        &[data-kbd] [role=option][aria-current="true"] {
            color: var(--color-field-inverse, oklch(43.9% 0 0));
            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
        }

        /* Filtered out */
        & [role=option][hidden] {
            display: none
        }

        /* Selected (multiple) */
        & [role=option][aria-selected="true"] {
            font-weight: 600
        }

        /* "Add …" create row */
        & .combobox-create {
            color: var(--color-content-neutral, oklch(43.9% 0 0))
        }

        /* Empty state */
        & .combobox-empty {
            padding: 0.5rem;
            color: var(--color-content-subtle, oklch(55.6% 0 0));
            cursor: default;

            &:hover {
                background: transparent
            }
        }
    }

    /* Screen-reader-only live region */
    :where(.combobox)> :where([role=status]) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0
    }
}