{"version":3,"file":"command-palette.css.cjs","names":[],"sources":["../../../src/overlay/command-palette/command-palette.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_radius: var(--command-palette-radius, var(--rounded-lg));\n    --_max-width: var(--command-palette-max-width, 40rem);\n    --_backdrop-bg: var(--command-palette-backdrop, color-mix(in oklch, var(--color-canvas) 40%, transparent));\n    --_panel-bg: var(--command-palette-bg, var(--color-canvas));\n    --_panel-border-color: var(--command-palette-border-color, var(--color-divider));\n    --_option-hover-bg: var(--command-palette-option-hover-bg, var(--color-contrast-100));\n    --_option-focus-bg: var(\n      --command-palette-option-focus-bg,\n      color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100))\n    );\n\n    display: contents;\n  }\n\n  /* =====================\n       Native <dialog> resets — see ore-dialog for the full rationale.\n       ===================== */\n\n  dialog {\n    all: unset;\n    position: fixed;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    padding-block-start: min(14vh, var(--size-24));\n    margin: 0;\n    overflow: hidden;\n    pointer-events: none;\n    background: transparent;\n    border: none;\n    transition:\n      display 200ms allow-discrete,\n      overlay 200ms allow-discrete;\n  }\n\n  dialog:not([open]) {\n    display: none;\n  }\n\n  dialog:not([open]) .panel {\n    display: none;\n  }\n\n  dialog[open] {\n    pointer-events: auto;\n  }\n\n  dialog::backdrop {\n    background: var(--_backdrop-bg);\n    opacity: 1;\n    backdrop-filter: blur(var(--blur-xs));\n    transition:\n      opacity var(--transition-normal),\n      overlay var(--transition-normal) allow-discrete,\n      display var(--transition-normal) allow-discrete;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  dialog.closing::backdrop {\n    opacity: 0;\n  }\n\n  /* =====================\n       Panel\n       ===================== */\n\n  .panel {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: var(--_max-width);\n    max-width: calc(100vw - var(--size-8));\n    max-height: min(28rem, calc(100dvh - var(--size-16)));\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--command-palette-shadow, var(--shadow-2xl));\n    opacity: 1;\n    backdrop-filter: blur(var(--blur-md));\n    transform: scale(1) translateY(0);\n    transition:\n      opacity 200ms var(--ease-spring),\n      transform 200ms var(--ease-spring);\n\n    @starting-style {\n      opacity: 0;\n      transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n    }\n  }\n\n  dialog.closing .panel {\n    opacity: 0;\n    transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n    transition:\n      opacity 150ms var(--ease-spring),\n      transform 150ms var(--ease-spring);\n  }\n\n  @media (width <= 640px) {\n    .panel {\n      width: calc(100vw - var(--size-4));\n      max-width: calc(100vw - var(--size-4));\n    }\n\n    dialog {\n      padding-block-start: var(--size-4);\n    }\n  }\n\n  /* =====================\n       Search field\n       ===================== */\n\n  .search {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-3) var(--size-4);\n    border-block-end: var(--border) solid var(--color-contrast-100);\n  }\n\n  .search-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    color: var(--color-contrast-400);\n  }\n\n  .search-input {\n    flex: 1;\n    min-width: 0;\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-md);\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  .search-input::placeholder {\n    color: var(--color-contrast-400);\n  }\n\n  .search-loader {\n    display: inline-flex;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: command-palette-spin var(--transition-loader) infinite;\n  }\n\n  .search-loader[hidden] {\n    display: none;\n  }\n\n  @keyframes command-palette-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  /* =====================\n       Listbox\n       ===================== */\n\n  .listbox {\n    flex: 1;\n    padding: var(--size-1);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    scrollbar-width: thin;\n  }\n\n  .empty {\n    padding: var(--size-6) var(--size-3);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .group-heading {\n    padding: var(--size-2) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  .item {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: center;\n    padding: var(--size-2) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .item:hover:not([data-disabled]) {\n    background: var(--_option-hover-bg);\n  }\n\n  .item[data-focused]:not([data-disabled]) {\n    background: var(--_option-focus-bg);\n  }\n\n  .item[data-disabled] {\n    color: var(--color-contrast-400);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .item-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .item-shortcut {\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n  }\n\n  .item-shortcut kbd {\n    padding: var(--size-0-5) var(--size-1-5);\n    font-family: var(--font-mono, monospace);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-bottom-width: calc(var(--border) + 1px);\n    border-radius: var(--rounded-sm);\n  }\n\n  /* =====================\n       Footer hints\n       ===================== */\n\n  .footer {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-4);\n    align-items: center;\n    padding: var(--size-2) var(--size-4);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n    border-block-start: var(--border) solid var(--color-contrast-100);\n  }\n\n  .footer-hint {\n    display: inline-flex;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .footer kbd {\n    padding: var(--size-0-5) var(--size-1);\n    font-family: inherit;\n    font-size: var(--text-xs);\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-bottom-width: calc(var(--border) + 1px);\n    border-radius: var(--rounded-sm);\n  }\n\n  /* Slotted item elements are pure data nodes — never rendered directly. */\n  ::slotted(ore-command-palette-item) {\n    display: none;\n  }\n}\n"],"mappings":""}