/* ============================================================================
   Dropdown + Dropdown / Content / Item — COMPONENTS.md §6.1, §6.2

   §6.2 Interactive is a CLAUDE.md reference implementation: its Active state
   does three things at once — brand tint, on-soft/brand label, and a weight
   step to Medium — so selection survives without colour. That redundancy is
   reproduced here, and extended to Focus, which §6 F3 records as missing.

   §6.1 F1: the Figma panel carries an unbound RAW shadow where
   Elevation/Overlay is described for exactly this case. Bound properly here.

   TODO(tokens): every bare px length in this file is a SIZE or a BREAKPOINT.
   DESIGN.md §12.4 records both as not built, so literals stand in until they
   are. No colour, radius, spacing, border-width or font-size literal appears
   anywhere in this file.
   ========================================================================== */

.dropdown {
  position: absolute;
  z-index: 60; /* TODO(tokens): z-index scale not built — DESIGN.md §12.4 */
  inset-block-start: calc(100% + var(--space-xs));
  inset-inline-end: 0;
  min-inline-size: 320px;
  max-inline-size: min(400px, calc(100vw - var(--space-lg) * 2));
  padding: var(--space-2xs);
  background: var(--color-surface-raised);
  border-radius: var(--shape-radius-menu);
  box-shadow: var(--elevation-overlay);
  /* DESIGN.md §8: in Dark, shadow does not read — do not rely on elevation
     alone to separate layers there. A hairline carries the edge instead, and
     light-dark() keeps that as one declaration rather than a forked rule. */
  border: var(--border-width-thin) solid
    light-dark(transparent, var(--color-border-default));
}

/* THE SAME PROBLEM AS DARK, IN LIGHT. The note above is about elevation not
   reading in Dark. It has a twin: a `surface/raised` panel is separated from
   the PAGE by its shadow, but over another `surface/raised` — a modal — it is
   white on white, and the shadow alone does not carry the edge. The purchases
   modal's row menus were effectively invisible until this was drawn.

   So inside a modal the hairline appears in both modes. Scoped to `.modal`
   rather than changed globally, because over the page the transparent border
   is correct and a hairline there would be a second edge. */
.modal .dropdown {
  border-color: var(--color-border-default);
}

.dropdown[hidden] {
  display: none;
}

.dropdown__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-block-size: 60vh;
  overflow-y: auto;
}

/* --- Dropdown / Content / Item — Group ----------------------------------- */
.dropdown__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  block-size: 26px; /* TODO(tokens): size not built — documented geometry */
  padding-inline: var(--space-md);
  color: var(--color-content-secondary);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}

/* --- Dropdown / Content / Item — Interactive ------------------------------ */
.dropdown__item {
  display: flex;
  inline-size: 100%;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-xs);
  text-align: start;
  text-decoration: none;
  background: var(--color-surface-raised);
  color: var(--color-content-primary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-weight: var(--font-weight-regular);
  transition: background-color 100ms ease; /* TODO(tokens): motion not built */
}

.dropdown__item:hover {
  background: var(--color-soft-neutral-default);
}

/* Pressed — the soft-neutral pressed step exists, is correct, and is
   unconsumed by any DS component (CLAUDE.md known gaps). Used deliberately. */
.dropdown__item:active {
  background: var(--color-soft-neutral-pressed);
}

/* Active = selection. Three channels: tint, ink, weight. */
.dropdown__item[aria-current="true"],
.dropdown__item.is-active {
  background: var(--color-soft-brand-default);
  color: var(--color-on-soft-brand);
  font-weight: var(--font-weight-medium);
}

.dropdown__item:disabled,
.dropdown__item[aria-disabled="true"] {
  background: var(--color-surface-raised);
  color: var(--color-content-disabled);
  cursor: default;
}

.dropdown__item-body {
  min-inline-size: 0;
  flex: 1 1 auto;
}

/* Trailing hint icon — the external-link / .ics affordance Redmine #81690
   asks for on a menu item ("each shows an external-link hint"). Inherits
   content/secondary from the item's own colour rather than currentColor,
   so it stays muted even when the item is selected. */
.dropdown__item-hint {
  flex: none;
  color: var(--color-content-secondary);
}

.dropdown__item-subtext {
  display: block;
  color: var(--color-content-secondary);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
  font-weight: var(--font-weight-regular);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Unread marker — the second, non-colour channel for "unread". A dot alone
   would be colour-only; it is paired with a Medium weight step on the title. */
.dropdown__item--unread .dropdown__item-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-content-headline);
}

.dropdown__item-dot {
  flex: none;
  inline-size: var(--space-xs);
  block-size: var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--color-indicator-brand);
}
.dropdown__item:not(.dropdown__item--unread) .dropdown__item-dot {
  visibility: hidden;
}

/* --- Dropdown / Content / Item — Empty State ----------------------------- */
.dropdown__empty {
  display: flex;
  min-block-size: 114px; /* documented geometry */
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  text-align: center;
  color: var(--color-content-primary);
}

/* --- Panel footer ------------------------------------------------------- */
.dropdown__footer {
  padding: var(--space-2xs);
  border-block-start: var(--border-width-thin) solid var(--color-border-default);
  margin-block-start: var(--space-2xs);
}

.dropdown__footer .dropdown__item {
  justify-content: center;
  color: var(--color-content-brand);
  font-weight: var(--font-weight-medium);
}

.dropdown__divider {
  block-size: var(--border-width-thin);
  margin: var(--space-2xs) var(--space-xs);
  background: var(--color-border-default);
  border: 0;
}


/* --- Opening upward ------------------------------------------------------
   For a panel inside a SCROLLING box, where there is not enough room below
   the trigger — the purchases modal's content scrolls, so a menu on one of
   the lower rows would be clipped by it. video.js measures at open time and
   adds this; see `flip` in wirePopover().

   The DS models one placement only (§6), so this is an addition rather than
   a variant of something drawn. */
.dropdown--up {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--space-xs));
}