/*
 * Menu
 *
 * Measured from Figma `Menu` (82:306), `Menu Item` (82:217) and
 * `Menu Section Title` (1468:271), all on the Menu page.
 *
 *   menu   padding 6, gap 2, radius/xl, surface/default, 1px border/subtle
 *   item   40 tall, padding 8/12, gap 8, radius/sm
 *
 * Figma models the list only — there is no trigger, popover or positioning in
 * the design, so there is none here. This is the surface a menu renders on;
 * anchoring it is the caller's job until MenuTrigger exists.
 *
 * HIGHLIGHT FOLLOWS FOCUS, NOT THE POINTER
 *
 * In an ARIA menu, hovering a row moves focus to it (useMenuItem does this), so
 * the keyboard and the pointer share one highlighted row. Figma's `Hover`
 * therefore reads `data-focused`, not `:hover`. Styling both would light two
 * rows at once when the pointer rests on one and the arrow keys move to another.
 *
 * SELECTED-HOVER IS NOT SELECTED PLUS HOVER
 *
 * Figma's `Selected-hover` drops back to `surface/hover` and recolours the
 * label to text/secondary — only the trailing check stays icon/primary. So
 * hovering a selected row loses the primary tint rather than deepening it,
 * which is the opposite of what composing the two states would produce. That is
 * why hover is not a modifier layered on top of selected here.
 */
.ion-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-6);
  background-color: var(--surface-default);
  border-style: solid;
  border-width: var(--border-width-default);
  border-color: var(--border-subtle);
  border-radius: var(--radius-xl);

  /* Figma's Menu carries Shadow/lg (82:306) — it is drawn as a dropdown
   * surface. Code shipped without it until 0.83.0, which only showed once the
   * menu floated over a page. */
  box-shadow: var(--ion-shadow-shadow-lg);
  font-family: var(--font-family-sans);
  list-style: none;
  margin: 0;
}

.ion-menu__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--spacing-40);

  /* No border on the item, so no border correction — unlike Input or Toggle. */
  padding: var(--spacing-8) var(--spacing-12);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--type-body);
  line-height: var(--type-body-line-height);
  font-weight: var(--font-weight-regular);
  text-align: start;
  cursor: pointer;
  outline: none;
  user-select: none;

  /*
   * No transition: the highlight is `data-focused`, which the arrow keys move
   * as often as the pointer does, and a highlight someone is arrowing through
   * is one they are waiting on — it snaps, as a press resolves fast. Pointer
   * hover elsewhere fades. See motion-system.md §3, rule 2.
   */
}

.ion-menu__icon,
.ion-menu__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--icon-default);
}

.ion-menu__icon svg,
.ion-menu__check svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* The check keeps its slot whether or not it is showing, so rows do not
 * reflow as the selection moves down the list. */
.ion-menu__check {
  margin-inline-start: auto;
  visibility: hidden;
}

.ion-menu__label {
  flex: 1 1 auto;
  min-width: 0;
}

.ion-menu__item[data-focused='true'] {
  background-color: var(--surface-hover);
}

.ion-menu__item--selected {
  background-color: var(--surface-primary-subtle);
  color: var(--text-primary);
}

.ion-menu__item--selected .ion-menu__icon,
.ion-menu__item--selected .ion-menu__check {
  color: var(--icon-primary);
}

.ion-menu__item--selected .ion-menu__check {
  visibility: visible;
}

/* See the header — highlighting a selected row drops the tint rather than
 * deepening it. The check stays primary; everything else returns to the resting
 * palette. */
.ion-menu__item--selected[data-focused='true'] {
  background-color: var(--surface-hover);
  color: var(--text-secondary);
}

.ion-menu__item--selected[data-focused='true'] .ion-menu__icon {
  color: var(--icon-default);
}

.ion-menu__item[data-focus-visible='true'] {
  outline: var(--border-width-thick) solid var(--border-focus);
  outline-offset: calc(-1 * var(--border-width-thick));
}

.ion-menu__item[data-disabled='true'] {
  background-color: transparent;
  color: var(--text-disabled);
  cursor: not-allowed;
}

.ion-menu__item[data-disabled='true'] .ion-menu__icon,
.ion-menu__item[data-disabled='true'] .ion-menu__check {
  color: var(--icon-disabled);
}

/* ------------------------------------------------------------- submenus
 *
 * Figma draws no submenu row. The chevron takes the check's place at the end
 * of the row — a submenu parent is never itself checkable — and the row keeps
 * its highlight while its submenu is open, so the eye can find its way back.
 */
.ion-menu__chevron {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-inline-start: auto;
  color: var(--icon-default);
}

.ion-menu__chevron svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.ion-menu__chevron:dir(rtl) svg {
  transform: scaleX(-1);
}

.ion-menu__item--submenu[data-open='true'] {
  background-color: var(--surface-hover);
}

/* ------------------------------------------------------------- floating
 *
 * The wrapper positions and paints nothing: Menu is already the surface. Its
 * width is Figma's 240 as a floor, so a menu of short labels does not shrink
 * to a sliver under a wide trigger, and a long one can still grow.
 *
 * z-index is Popover's, for Popover's reason: a menu opened from inside a
 * dialog has to sit above it, and a toast confirming its action above both.
 */
.ion-menu-popover {
  --ion-menu-min-width: 240px;

  display: flex;
  flex-direction: column;
  z-index: 1150;
  outline: none;
}

.ion-menu-popover > .ion-menu {
  min-width: var(--ion-menu-min-width);
  min-height: 0;
  overflow-y: auto;
}

.ion-menu-popover__underlay {
  position: fixed;
  inset: 0;
  z-index: 1140;
}

/* ------------------------------------------------------------- sections
 *
 * A section is an <li role="presentation"> holding a heading and a nested
 * <ul role="group">, so both carry the list's own flex column and gap —
 * otherwise rows inside a section would sit 2px closer together than rows
 * outside one.
 */
.ion-menu__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.ion-menu__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Figma `Menu Section Title` (1468:271): caption in text/tertiary, then a
 * 1px border/strong rule filling the rest of the row, with 8/12/4 insets so
 * the caption lines up with the row labels beneath it.
 *
 * It was drawn from this stylesheet on 25 Sep 2026. Before that, 0.82.0 had
 * mapped MenuSection to a same-named heading on the Side Menu page — a
 * pre-Sidebar side-nav drawing with a 7px gap and no insets, not a menu part.
 */
.ion-menu__section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-12) var(--spacing-4);
  color: var(--text-tertiary);
  font-size: var(--type-caption);
  line-height: var(--type-caption-line-height);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
}

.ion-menu__section-title::after {
  content: '';
  flex: 1 1 auto;
  min-width: var(--spacing-8);
  height: var(--border-width-default);
  background-color: var(--border-strong);
}

/* An untitled section after the first is set off by a rule alone. Same line as
 * the title's, so a menu mixing the two draws one kind of divider. */
.ion-menu__separator {
  height: var(--border-width-default);
  margin: var(--spacing-4) var(--spacing-12);
  background-color: var(--border-strong);
}

@media (forced-colors: active) {
  .ion-menu__item[data-focused='true'] {
    outline: var(--border-width-thick) solid Highlight;
    outline-offset: calc(-1 * var(--border-width-thick));
  }

  .ion-menu__section-title::after,
  .ion-menu__separator {
    background-color: CanvasText;
  }
}

/* ContextMenu's anchor: a zero-size point where the pointer was. */
.ion-context-menu__anchor {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
}