@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
/* CommandMenu renders CommandItem as its list entries. Pull in CommandItem
 * styles so that importing `cinder/command-menu` is self-sufficient. */
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/command-item/command-item.css';

@layer cinder.components {
  /* ========================================
 * COMMAND MENU
 * ======================================== */

  .cinder-command-menu {
    /* CommandMenu keeps a smaller caret menu viewport and flush item padding;
     * shared panel chrome comes from cinder-_floating-surface. */
    min-inline-size: min(20rem, calc(100vw - var(--cinder-space-4)));
    max-inline-size: min(28rem, calc(100vw - var(--cinder-space-4)));
    max-block-size: min(20rem, calc(100vh - var(--cinder-space-4)));
    padding: var(--cinder-space-2) 0;
    overflow-y: auto;
    list-style: none;
  }

  .cinder-command-menu__listbox {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Zero matching items leaves the listbox with no <li> children, which
   * collapses it to a zero-size box. A screen reader (or Playwright's
   * `toBeVisible()`) landing on the listbox itself would then see nothing.
   * `aria-describedby` on the <ul> points at the empty-state message, and this
   * min-block-size keeps the listbox a real, non-zero-size box while empty. */
  .cinder-command-menu__listbox[data-cinder-empty='true'] {
    min-block-size: 1px;
  }

  .cinder-command-menu[data-cinder-position-ready='false'] {
    visibility: hidden;
  }

  .cinder-command-menu__empty {
    padding: var(--cinder-space-6) var(--cinder-space-4);
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
    text-align: center;
  }

  /* Ghost-text inline completion. `aria-hidden`, positioned via a mirrored
   * text measurement (see caret-rect.svelte.ts) rather than laid out in
   * normal flow — see command-menu.a11y.md decision (a). Consumes
   * `cinder-_floating-surface` for its shared `position: fixed` +
   * `z-index` (the check-primitive-composition guard requires that class
   * for anything with that pairing rather than a hand-rolled one), then
   * strips the panel chrome that class also brings — a ghost span is bare
   * text, not a bordered/backgrounded surface. */
  .cinder-_floating-surface.cinder-command-menu__ghost {
    box-sizing: content-box;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--cinder-text-disabled);
    white-space: pre;
    pointer-events: none;
  }

  .cinder-command-menu__ghost[data-cinder-position-ready='false'] {
    visibility: hidden;
  }
}