/**
 * Context Menu Styles
 * @countermeasure/web-components
 *
 * 1:1 visual parity with the React `ContextMenu` primitives. Class rules below
 * map directly onto the React Tailwind definitions:
 *   content   -> fixed z-50 min-w-[10rem] overflow-hidden rounded-xl border p-1
 *                shadow-xl border-border-glass bg-popover backdrop-blur-xl
 *                animate-in fade-in-0 zoom-in-95
 *   item      -> relative flex cursor-pointer items-center rounded-lg px-3 py-2
 *                text-sm transition-colors outline-none select-none
 *                text-foreground hover:bg-accent focus:bg-accent
 *                disabled -> pointer-events-none opacity-50
 *   separator -> bg-border-glass my-1 h-px
 *   label     -> text-foreground-muted px-3 py-1.5 text-xs font-semibold
 *   shortcut  -> text-foreground-muted ml-auto pl-4 text-xs tracking-widest
 *
 * `destructive` has no React-twin equivalent; it is a backward-compatible
 * vanilla-only modifier mapped onto the design-system destructive token.
 */

/* ============================================================================
   CONTEXT MENU CONTAINER (content)
   ============================================================================ */
.cmm-context-menu {
  box-sizing: border-box;
  position: fixed;
  z-index: var(--z-popover, 500);
  min-width: 10rem;
  overflow: hidden;
  padding: 0.25rem;
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-xl);
  background-color: var(--color-popover);
  color: var(--color-popover-foreground);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: cmm-context-menu-in 150ms ease-out;
}

@keyframes cmm-context-menu-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================================================
   MENU ITEMS
   ============================================================================ */
.cmm-context-menu__item {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: color 150ms, background-color 150ms;
}

.cmm-context-menu__item:hover,
.cmm-context-menu__item--active {
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
}

.cmm-context-menu__item:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
}

/* Disabled item */
.cmm-context-menu__item--disabled {
  pointer-events: none;
  opacity: 0.5;
}

.cmm-context-menu__item--disabled:hover {
  background: transparent;
  color: var(--color-foreground);
}

/* Destructive item (vanilla-only modifier) */
.cmm-context-menu__item--destructive {
  color: var(--color-destructive);
}

.cmm-context-menu__item--destructive:hover,
.cmm-context-menu__item--destructive.cmm-context-menu__item--active {
  background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
  color: var(--color-destructive);
}

.cmm-context-menu__item--destructive .cmm-context-menu__icon {
  color: var(--color-destructive);
}

/* ============================================================================
   SEPARATOR
   ============================================================================ */
.cmm-context-menu__separator {
  height: 1px;
  margin: 0.25rem 0;
  background-color: var(--color-border-glass);
}

/* ============================================================================
   ITEM ICON
   ============================================================================ */
.cmm-context-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-muted-foreground);
}

.cmm-context-menu__icon svg {
  width: 100%;
  height: 100%;
}

.cmm-context-menu__item:hover .cmm-context-menu__icon,
.cmm-context-menu__item--active .cmm-context-menu__icon {
  color: inherit;
}

/* ============================================================================
   ITEM LABEL
   ============================================================================ */
.cmm-context-menu__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================
   KEYBOARD SHORTCUT
   ============================================================================ */
.cmm-context-menu__shortcut {
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-foreground-muted);
}

/* ============================================================================
   SUBMENU INDICATOR
   ============================================================================ */
.cmm-context-menu__submenu-arrow {
  margin-left: auto;
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-muted-foreground);
}

/* ============================================================================
   GROUP LABEL (matches React `ContextMenuLabel`)
   ============================================================================ */
.cmm-context-menu__group-label {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-foreground-muted);
  user-select: none;
}

/* ============================================================================
   CHECKBOX / RADIO ITEMS (vanilla-only; no React-twin equivalent)
   ============================================================================ */
.cmm-context-menu__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: transparent;
}

.cmm-context-menu__item--checked .cmm-context-menu__check {
  color: var(--color-primary);
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .cmm-context-menu {
    animation: none;
  }

  .cmm-context-menu__item {
    transition: none;
  }
}
