{"version":3,"file":"combobox.css.cjs","names":[],"sources":["../../../src/inputs/combobox/combobox.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_dropdown-bg: var(--combobox-dropdown-bg, var(--color-canvas));\n    --_dropdown-border-color: var(--combobox-dropdown-border-color, var(--color-contrast-200));\n    --_option-hover-bg: var(--combobox-option-hover-bg, var(--color-contrast-100));\n    --_option-focus-bg: var(\n      --combobox-option-focus-bg,\n      color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))\n    );\n    --_option-selected-bg: var(\n      --combobox-option-selected-bg,\n      color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))\n    );\n    --_option-selected-focus-bg: var(\n      --combobox-option-selected-focus-bg,\n      color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))\n    );\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: var(--combobox-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    width: 100%;\n  }\n\n  /* .sr-only is provided by the shared srOnlyMixin (see styles: [...] in combobox.ts) */\n\n  /* ore-input cursor override so the field still feels like a text input */\n  .trigger::part(input) {\n    cursor: text;\n  }\n\n  /* Allow the field to grow vertically when chips wrap to multiple rows. */\n  .trigger::part(field) {\n    height: auto;\n    min-height: var(--input-height, var(--size-10));\n  }\n\n  /* Wrap chips + input across rows; suffix stays on same row as input.\n     Only row-gap is set here — column spacing between chips is handled\n     via margin on ore-chip so the empty prefix slot adds no extra offset\n     (which would shift the input rightward vs the inset label). */\n  .trigger::part(input-row) {\n    flex-wrap: wrap;\n    row-gap: var(--size-1);\n    align-items: center;\n  }\n\n  /* ========================================\n       Chips (prefix slot)\n       ======================================== */\n\n  /* display:contents removes chips-row from the flex layout so chips\n     become direct flex items of input-row — no extra gap before input\n     when there are no chips (fixes inset-label alignment). */\n  .chips-row {\n    display: contents;\n  }\n\n  /* chips-list is also display:contents so individual ore-chip elements\n     are the direct flex items, wrapping inline with the search input. */\n  .chips-list {\n    display: contents;\n  }\n\n  /* Trailing space after each chip covers both inter-chip spacing and\n     the gap between the last chip and the search input. */\n  ore-chip {\n    margin-inline-end: var(--size-1);\n  }\n\n  /* ========================================\n       Suffix: clear button + loader + chevron\n       ======================================== */\n\n  .combobox-suffix {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .clear-btn {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    padding: 0;\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: none;\n    border: 0;\n  }\n\n  .clear-btn[hidden] {\n    display: none;\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-600);\n  }\n\n  .combobox-suffix-end {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .chevron {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  :host([open]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  .loader {\n    display: none;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  :host([loading]) .loader {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Dropdown / Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: calc(var(--z-popover, 1000) + 1);\n    box-sizing: border-box;\n    max-height: min(16rem, 50dvh);\n    padding: var(--size-1);\n    margin: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    scrollbar-width: thin;\n    background: var(--_dropdown-bg);\n    border: var(--border) solid var(--_dropdown-border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-md));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ========================================\n       Option Items\n       ======================================== */\n\n  .option {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Truncate long labels so options always stay single-line (fixed virtualizer row height). */\n  .option > span:not(.option-check, .option-icon) {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--_option-hover-bg);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: var(--_option-focus-bg);\n  }\n\n  .option[data-selected],\n  .option[aria-selected='true'] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: var(--_option-selected-bg);\n  }\n\n  .option[data-selected][data-focused],\n  .option[aria-selected='true'][data-focused] {\n    background: var(--_option-selected-focus-bg);\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-400);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .option-check {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    color: var(--_theme-base);\n    opacity: 0;\n    transition: opacity var(--transition-fast);\n  }\n\n  .option[data-selected] .option-check,\n  .option[aria-selected='true'] .option-check {\n    opacity: 1;\n  }\n\n  .no-results,\n  .no-results-create,\n  .dropdown-loading {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .no-results-create {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    width: 100%;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--_theme-content, var(--color-primary-content));\n    text-align: start;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: var(--rounded-sm);\n  }\n\n  .no-results-create:hover,\n  .no-results-create[data-focused] {\n    background: color-mix(in oklch, var(--_theme-base, var(--color-primary)) 10%, transparent);\n  }\n\n  /* ========================================\n       Option Icon\n       ======================================== */\n\n  .option-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  /* ========================================\n       Slotted option elements (hidden data nodes)\n       ======================================== */\n\n  ::slotted(ore-combobox-option) {\n    display: none;\n  }\n}\n"],"mappings":""}