/**
 * DraggableContextMenu — small `…` dropdown attached to draggable list rows.
 *
 * Override handles:
 *   .byline-draggable-menu             — dropdown content panel
 *   .byline-draggable-menu-item        — individual menu item
 *   .byline-draggable-menu-row         — flex row inside an item
 *   .byline-draggable-menu-icon-slot   — fixed-width icon column
 *   .byline-draggable-menu-label       — label text column
 *   .byline-draggable-menu-label-danger — destructive-action label
 *   .byline-draggable-menu-separator   — separator between items
 */

.menu,
:global(.byline-draggable-menu) {
  z-index: 40;
  width: 8.5rem;
  padding: 0.25rem 0.375rem;
  background-color: white;
  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
  border-radius: var(--border-radius-sm);
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.item,
:global(.byline-draggable-menu-item) {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: 5px 2px;
  border-radius: var(--border-radius-sm);
  color: var(--gray-600);
  cursor: default;
  user-select: none;
  outline: none;
}

@media (min-width: 48rem) {
  .item,
  :global(.byline-draggable-menu-item) {
    font-size: var(--font-size-sm);
  }
}

.item:hover,
.item:focus,
:global(.byline-draggable-menu-item):hover,
:global(.byline-draggable-menu-item):focus {
  background-color: oklch(from var(--canvas-50) l c h / 0.3);
}

.row,
:global(.byline-draggable-menu-row) {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}

.icon-slot,
:global(.byline-draggable-menu-icon-slot) {
  display: inline-block;
  width: 22px;
}

.label,
:global(.byline-draggable-menu-label) {
  display: inline-block;
  flex: 1;
  width: 100%;
  align-self: flex-start;
  text-align: left;
  color: black;
}

.label-danger,
:global(.byline-draggable-menu-label-danger) {
  color: var(--red-600);
}

.delete-icon,
:global(.byline-draggable-menu-delete-icon) {
  stroke: var(--red-600);
}

.separator,
:global(.byline-draggable-menu-separator) {
  width: 90%;
  margin: 0.25rem auto;
  border: none;
  border-top: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
}

/* ─── Dark theme variants ───────────────────────────────────── */

:is([data-theme="dark"], :global(.dark)) {
  .menu,
  :global(.byline-draggable-menu) {
    background-color: var(--canvas-800);
    border-color: var(--canvas-700);
  }

  .item,
  :global(.byline-draggable-menu-item) {
    color: var(--gray-300);
  }

  .item:hover,
  .item:focus,
  :global(.byline-draggable-menu-item):hover,
  :global(.byline-draggable-menu-item):focus {
    background-color: var(--canvas-900);
  }

  .label,
  :global(.byline-draggable-menu-label) {
    color: var(--gray-300);
  }

  .separator,
  :global(.byline-draggable-menu-separator) {
    border-top-color: var(--gray-900);
  }
}