@layer components {

    /* ── Size tokens ── */
    .search-bar--sm {
        --_height: 2rem;
        --_pad: var(--spacing-sm);
        --_icon: 14px;
        --_clear: 12px;
    }

    .search-bar--md {
        --_height: 2.5rem;
        --_pad: var(--spacing-md);
        --_icon: 16px;
        --_clear: 14px;
    }

    .search-bar--lg {
        --_height: 3rem;
        --_pad: var(--spacing-lg);
        --_icon: 18px;
        --_clear: 16px;
    }

    /* ── Container ── */
    .search-bar {
        --_fr-color: var(--search-bar-focus-ring-color, var(--form-focus-ring-color, var(--search-bar-focus-color, var(--color-border))));
        --_fr-width: var(--search-bar-focus-ring-width, var(--form-focus-ring-width, 2px));
        --_fr-offset: var(--search-bar-focus-ring-offset, var(--form-focus-ring-offset, 0px));
        --_fr-style: var(--search-bar-focus-ring-style, var(--form-focus-ring-style, solid));
        --_fr-speed: var(--search-bar-focus-ring-speed, var(--form-focus-ring-speed, 150ms));
        position: relative;
        display: flex;
        align-items: center;
        height: var(--_height);
        font-size: var(--font-size-body);
        background: var(--search-bar-bg, transparent);
        border: 1px solid transparent;
        outline: var(--_fr-width) var(--_fr-style) transparent;
        outline-offset: var(--_fr-offset);
        transition: background var(--transition-speed), border-color var(--transition-speed), outline-color var(--_fr-speed);
    }

    .no-transition .search-bar__form,
    .no-transition .search-bar__divider {
        transition: none;
    }

    /* Dark mode toggle — suppress color transitions but keep geometry (width/height/margin) for expand */
    body.no-transitions .search-bar.search-bar {
        transition: outline-color 0s, border-color 0s, background 0s;
    }

    body.no-transitions .search-bar .search-bar__submit {
        transition: background 0s, color 0s, box-shadow 0s, outline-color 0s,
            width var(--transition-speed), height var(--transition-speed), margin var(--transition-speed);
    }

    .search-bar:not(.search-bar--expandable) {
        flex: 1;
        min-width: 0;
        max-width: var(--search-bar-max-width, none);
    }

    .search-bar--bordered {
        border-color: var(--search-bar-border-color, var(--color-border));
        border-radius: var(--search-bar-radius, var(--radius-lg));
    }

    .search-bar--underline {
        border-bottom: 1px solid var(--search-bar-border-color, var(--color-border));
    }

    .search-bar:not(.search-bar--expandable):has(.search-bar__input:focus),
    .search-bar--expandable.is-expanded:has(.search-bar__input:focus) {
        border-color: var(--search-bar-focus-color, var(--color-primary));
    }

    .search-bar--underline:has(.search-bar__input:focus) {
        border-color: transparent;
        border-bottom-color: var(--search-bar-focus-color, var(--color-primary));
    }

    /* Focus ring — uses :focus for both modes since input gets programmatic focus */
    [data-focus-ring] .search-bar:not(.search-bar--expandable):has(.search-bar__input:focus),
    [data-focus-ring] .search-bar--expandable.is-expanded:has(.search-bar__input:focus) {
        outline-color: var(--_fr-color);
    }

    /* ── Search icon (non-clickable) ── */
    .search-bar__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding-inline-start: var(--_pad);
        color: var(--search-bar-icon-color, color-mix(in srgb, var(--color-text) 50%, transparent));
    }

    .search-bar__icon svg {
        width: var(--_icon);
        height: var(--_icon);
    }

    /* ── Input ── */
    .search-bar__input {
        flex: 1;
        min-width: 0;
        height: 100%;
        display: flex;
        align-items: center;
        padding-inline: var(--_pad);
        border: none;
        background: transparent;
        font-family: var(--font-body);
        font-size: inherit;
        color: var(--color-text);
        outline: none;
    }

    .search-bar:not(.search-bar--trigger-right):not(.search-bar--expandable) .search-bar__input {
        padding-inline: var(--spacing-xs) var(--spacing-sm);
    }

    .search-bar__input::placeholder {
        color: color-mix(in srgb, var(--color-text) 50%, transparent);
    }

    .search-bar__input::-webkit-search-cancel-button,
    .search-bar__input::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }

    /* ── Clear button ── */
    .search-bar__clear {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: var(--spacing-xs);
        border: none;
        background: none;
        color: color-mix(in srgb, var(--color-text) 50%, transparent);
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-speed), color var(--transition-speed);
    }

    .search-bar__clear.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    .search-bar__clear:hover {
        color: var(--color-text);
    }

    .search-bar__clear svg {
        width: var(--_clear);
        height: var(--_clear);
    }

    /* ── Divider ── */
    .search-bar__divider {
        width: 1px;
        height: var(--search-bar-divider-height, 60%);
        background: var(--color-border);
        flex-shrink: 0;
        margin-inline: 0;
        transition: background var(--transition-speed);
    }

    /* ── Category (embedded select overrides) ── */
    .search-bar__category {
        flex-shrink: 0;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .search-bar__select {
        height: 100%;
    }

    .search-bar__select .select__trigger {
        height: 100%;
        padding: 0 var(--spacing-md) 0 var(--spacing-md);
        white-space: nowrap;
        font-weight: normal;
        font-size: var(--font-size-body);
    }

    .search-bar__select .select__trigger:focus-visible {
        box-shadow: inset 0 0 0 var(--_fr-width) var(--_fr-color);
        border-radius: var(--search-bar-radius, var(--radius-lg));
    }

    .search-bar__select .select__trigger {
        border-radius: 0 var(--search-bar-radius, var(--radius-lg)) var(--search-bar-radius, var(--radius-lg)) 0;
    }

    .search-bar--trigger-right .search-bar__select .select__trigger {
        border-radius: var(--search-bar-radius, var(--radius-lg)) 0 0 var(--search-bar-radius, var(--radius-lg));
    }

    .search-bar__select .select__trigger:hover {
        color: var(--_c);
        background: color-mix(in oklch, var(--color-surface) var(--surface-hover-mix, 93%), var(--color-text));
    }

    .search-bar__select .select__list {
        left: 0;
        right: auto;
        min-width: 100%;
        width: max-content;
    }

    /* ── Submit button — base ── */
    .search-bar__submit {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: fit-content;
        aspect-ratio: 1;
        border: none;
        cursor: pointer;
        position: relative;
        z-index: 1;
        border-radius: var(--search-bar-btn-radius, var(--search-bar-radius, var(--radius-lg)));
        outline: var(--_fr-width) var(--_fr-style) transparent;
        outline-offset: 0px;
        transition: background var(--transition-speed), color var(--transition-speed), outline-color var(--_fr-speed);
    }

    .search-bar__submit svg {
        display: block;
        width: var(--_icon);
        height: var(--_icon);
    }

    /* Submit — filled style */
    .search-bar--btn-filled .search-bar__submit {
        --_btn-bg: var(--search-bar-btn-bg, var(--color-primary));
        --_inset: var(--search-bar-btn-inset, 0px);
        background: var(--_btn-bg);
        color: var(--search-bar-btn-color, var(--color-on-primary));
        height: calc(100% - 2 * var(--_inset));
        margin: var(--_inset);
    }

    .search-bar--btn-filled .search-bar__submit:hover {
        background: var(--search-bar-btn-bg-hover, color-mix(in oklch, var(--_btn-bg) var(--button-hover-mix, 85%), var(--color-background)));
    }

    /* Submit — icon style (transparent, just icon) */
    .search-bar--btn-icon .search-bar__submit {
        background: transparent;
        color: var(--search-bar-icon-color, color-mix(in srgb, var(--color-text) 50%, transparent));
        margin: 0;
        height: 100%;
    }

    .search-bar--btn-icon .search-bar__submit:hover {
        background: transparent;
        color: var(--color-text);
    }

    /* Submit — bordered style (border + hover bg) */
    .search-bar--btn-bordered .search-bar__submit {
        background: transparent;
        color: var(--search-bar-icon-color, var(--color-text));
        margin-inline: var(--search-bar-btn-inset, 0);
        height: calc(100% - 2 * var(--search-bar-btn-inset, 0px));
        box-shadow: inset 0 0 0 1px var(--color-border);
    }

    .search-bar--btn-bordered .search-bar__submit:hover {
        background: var(--color-surface);
    }

    /* ── Icon swap (expandable) ── */
    .search-bar__submit-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity var(--transition-speed);
    }

    .search-bar__submit-icon--close {
        position: absolute;
        inset: 0;
        opacity: 0;
    }

    .search-bar--expandable.is-expanded.is-empty .search-bar__submit-icon--search {
        opacity: 0;
    }

    .search-bar--expandable.is-expanded.is-empty .search-bar__submit-icon--close {
        opacity: 1;
    }

    /* ── Expandable mode ── */
    .search-bar.search-bar--expandable {
        flex: 0 0 auto;
        overflow: hidden;
        outline-color: transparent;
        border-color: transparent;
    }

    .search-bar.search-bar--expandable:not(.is-expanded):not(.is-collapsing) {
        overflow: visible;
    }

    .search-bar--trigger-right {
        margin-inline-start: auto;
    }

    /* Trigger fills bar height, square */
    .search-bar--expandable .search-bar__submit {
        width: var(--_height);
        height: var(--_height);
        aspect-ratio: auto;
        transition: background var(--transition-speed), color var(--transition-speed), width var(--transition-speed), height var(--transition-speed), margin var(--transition-speed), box-shadow var(--transition-speed), outline-color var(--transition-speed);
    }

    .search-bar--expandable.is-expanded .search-bar__submit {
        --_submit-size: calc(var(--_height) - 2 * var(--search-bar-btn-inset, 0px));
        width: var(--_submit-size);
        height: var(--_submit-size);
    }

    /* All content zeroed — bar shrinks to trigger size */
    .search-bar--expandable .search-bar__input {
        width: 0;
        min-width: 0;
        padding: 0;
        flex: 0 0 0;
        overflow: hidden;
        opacity: 0;
        transition: width var(--transition-speed) ease, padding var(--transition-speed) ease, opacity var(--transition-speed) ease;
    }

    .search-bar--expandable .search-bar__clear,
    .search-bar--expandable .search-bar__divider,
    .search-bar--expandable .search-bar__category,
    .search-bar--expandable .search-bar__icon {
        width: 0;
        min-width: 0;
        padding: 0;
        margin: 0;
        border: 0;
        overflow: hidden;
        flex: 0 0 0;
        opacity: 0;
        transition: opacity var(--transition-speed) ease;
    }

    /* Expandable collapsed — bordered trigger: reset inset, it only applies when expanded */
    .search-bar--btn-bordered.search-bar--expandable:not(.is-expanded) .search-bar__submit {
        margin-inline: 0;
        height: 100%;
        box-shadow: inset 0 0 0 1px var(--color-border);
    }

    [data-focus-ring="keyboard"] .search-bar--btn-bordered.search-bar--expandable .search-bar__submit:focus-visible,
    [data-focus-ring="always"] .search-bar--btn-bordered.search-bar--expandable .search-bar__submit:focus {
        outline-color: var(--_fr-color);
    }

    /* ── Expanded state ── */
    .search-bar.search-bar--expandable.is-expanded {
        background: var(--search-bar-bg, transparent);
        border-color: var(--search-bar-border-color, var(--color-border));
    }

    .search-bar.search-bar--expandable.is-overflow-visible {
        overflow: visible;
    }

    /* Input gets JS-set width, transitions it */
    .search-bar--expandable.is-expanded .search-bar__input {
        flex: 0 0 auto;
        padding-inline: var(--spacing-sm) var(--_pad);
        overflow: visible;
        opacity: 1;
    }

    .search-bar--expandable.is-locked .search-bar__input {
        flex: 1;
        width: auto !important;
        min-width: 0;
    }

    .search-bar--trigger-right.is-expanded .search-bar__input {
        padding-inline: var(--spacing-md) var(--spacing-sm);
    }

    .search-bar--expandable.is-expanded .search-bar__clear {
        width: auto;
        min-width: auto;
        padding: var(--spacing-xs);
        overflow: visible;
        flex: 0 0 auto;
    }

    .search-bar--expandable.is-expanded .search-bar__divider {
        width: 1px;
        min-width: 1px;
        overflow: visible;
        flex: 0 0 auto;
        opacity: 1;
    }

    .search-bar--expandable.is-expanded .search-bar__category {
        width: auto;
        min-width: auto;
        overflow: visible;
        flex: 0 0 auto;
        opacity: 1;
    }

    .search-bar--expandable.is-expanded .search-bar__icon {
        width: auto;
        min-width: auto;
        padding-inline-start: var(--_pad);
        overflow: visible;
        flex: 0 0 auto;
        opacity: 1;
    }

    /* Collapsing — hide everything except input (it transitions) */
    .search-bar--expandable.is-collapsing .search-bar__clear,
    .search-bar--expandable.is-collapsing .search-bar__divider,
    .search-bar--expandable.is-collapsing .search-bar__category,
    .search-bar--expandable.is-collapsing .search-bar__icon {
        width: 0;
        min-width: 0;
        padding: 0;
        margin: 0;
        border: 0;
        overflow: hidden;
        flex: 0 0 0;
        opacity: 0;
    }

    .search-bar--expandable.is-collapsing .search-bar__input {
        padding: 0;
        opacity: 0;
    }

    /* Expanded — bordered: remove trigger box-shadow */
    .search-bar--btn-bordered.search-bar--expandable.is-expanded .search-bar__submit {
        box-shadow: none;
    }
}