/* Material Design 3 Context Menu Component
 * ==========================================================================
 * MD3 Context menus display a list of actions for an item
 * Reference: https://m3.material.io/components/menus
 */

/* Context Menu Container
 * -------------------------------------------------------------------------- */

.context-menu {
  /* Structure */
  position: relative;
  display: inline-block;
}

/* Context Menu Trigger
 * -------------------------------------------------------------------------- */

.context-menu__trigger {
  /* Structure */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;

  /* Sizing */
  width: 40px;
  height: 40px;
  padding: 8px;

  /* Appearance */
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--color-ink--surface);
  cursor: pointer;

  /* Interaction */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.context-menu__trigger:hover {
  background: oklch(0 0 0 / 0.08);
}

.context-menu__trigger:active {
  background: oklch(0 0 0 / 0.12);
}

.context-menu__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Trigger icon */
.context-menu__trigger-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Context Menu Dropdown
 * -------------------------------------------------------------------------- */

.context-menu__dropdown {
  /* Structure - Overlay surface (Level 3) */
  position: absolute;
  z-index: var(--layer-popover);

  /* Default positioning */
  top: 100%;
  right: 0;
  margin-top: 4px;

  /* Sizing */
  min-width: 180px;
  max-width: 280px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;

  /* Appearance */
  background: var(--color-bg--overlay);
  color: var(--color-ink--overlay);
  border-radius: 12px;
  box-shadow:
    0 4px 6px 0 oklch(0 0 0 / 0.3),
    0 8px 24px 4px oklch(0 0 0 / 0.15);

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95) translateY(-8px);
  transform-origin: top right;

  /* Animation */
  transition:
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Content */
  padding: 4px 0;
  list-style: none;
  margin: 0;
}

/* Open state */
.context-menu--open .context-menu__dropdown,
.context-menu__dropdown[data-state="open"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

/* Position variants */
.context-menu__dropdown--left {
  left: 0;
  right: auto;
  transform-origin: top left;
}

.context-menu__dropdown--top {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
  transform-origin: bottom right;
}

.context-menu__dropdown--top.context-menu__dropdown--left {
  transform-origin: bottom left;
}

/* Menu Forms (for inline actions like Publish/Unpublish)
 * -------------------------------------------------------------------------- */

.context-menu__form {
  display: contents; /* Makes the form transparent to layout */
}

/* Menu Items
 * -------------------------------------------------------------------------- */

.context-menu__item {
  /* Structure */
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  position: relative;

  /* Spacing */
  padding: 8px 16px;
  min-height: 48px;

  /* Typography */
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;

  /* Appearance */
  background: transparent;
  color: var(--color-ink--overlay);
  border: none;
  cursor: pointer;

  /* Interaction */
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

/* Item states */
.context-menu__item:hover {
  background: oklch(from var(--color-bg--overlay) calc(l * 0.95) c h);
}

.context-menu__item:active {
  background: oklch(from var(--color-bg--overlay) calc(l * 0.9) c h);
}

.context-menu__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.context-menu__item--disabled {
  opacity: 0.38;
  pointer-events: none;
  cursor: not-allowed;
}

.context-menu__item--selected {
  background: var(--color-bg--primary-container);
  color: var(--color-ink--primary-container);
}

.context-menu__item--danger {
  color: var(--color-error);
}

/* Item elements */
.context-menu__item-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.context-menu__item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-menu__item-shortcut {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.6;
  padding-left: 12px;
}

/* Menu Divider
 * -------------------------------------------------------------------------- */

.context-menu__divider {
  height: 1px;
  background: var(--color-border--light);
  margin: 4px 0;
}

/* Menu Section Header
 * -------------------------------------------------------------------------- */

.context-menu__header {
  padding: 8px 16px 4px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  line-height: 1.5;
}

/* Submenu
 * -------------------------------------------------------------------------- */

.context-menu__item--has-submenu {
  position: relative;
}

.context-menu__item--has-submenu::after {
  content: '';
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: currentColor;
  opacity: 0.6;
  /* Arrow icon would go here */
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>') center/contain no-repeat;
}

.context-menu__submenu {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 4px;
  /* Inherits other styles from dropdown */
}

/* Backdrop for modal behavior (optional)
 * -------------------------------------------------------------------------- */

.context-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--layer-scrim);
  background: transparent;
  display: none;
}

.context-menu--open .context-menu__backdrop {
  display: block;
}

/* Dark mode adjustments
 * -------------------------------------------------------------------------- */

[data-color-scheme="dark"] {
  .context-menu__trigger:hover {
    background: oklch(1 0 0 / 0.08);
  }

  .context-menu__trigger:active {
    background: oklch(1 0 0 / 0.12);
  }

  .context-menu__dropdown {
    box-shadow:
      0 4px 6px 0 oklch(0 0 0 / 0.4),
      0 8px 24px 4px oklch(0 0 0 / 0.25);
  }

  .context-menu__item:hover {
    background: oklch(from var(--color-bg--overlay) calc(l * 1.05) c h);
  }

  .context-menu__item:active {
    background: oklch(from var(--color-bg--overlay) calc(l * 1.1) c h);
  }
}

/* Responsive behavior
 * -------------------------------------------------------------------------- */

@media (max-width: 40em) {
  .context-menu__dropdown {
    min-width: 160px;
  }
}

/* Examples of usage:
 * --------------------------------------------------------------------------
 *
 * Basic context menu:
 * <div class="context-menu" data-controller="context-menu">
 *   <button class="context-menu__trigger" data-action="click->context-menu#toggle">
 *     <%= icon(:ellipsis_vertical, size: 24, class: "context-menu__trigger-icon") %>
 *   </button>
 *   <ul class="context-menu__dropdown" data-context-menu-target="dropdown">
 *     <li><button class="context-menu__item">Edit</button></li>
 *     <li><button class="context-menu__item">Delete</button></li>
 *   </ul>
 * </div>
 *
 * With icons and shortcuts:
 * <ul class="context-menu__dropdown">
 *   <li>
 *     <button class="context-menu__item">
 *       <%= icon(:edit, size: 20, class: "context-menu__item-icon") %>
 *       <span class="context-menu__item-label">Edit</span>
 *       <span class="context-menu__item-shortcut">⌘E</span>
 *     </button>
 *   </li>
 * </ul>
 */