/*
 * mlp-dropdown-menu styles. Import after platform.css, same convention as mlp-forms/mlp-sidebar
 * — reuses its tokens (--c-*, --s-*, --shadow, --radius, --radius-sm). This is the popover
 * *mechanism* only, but — like `mlp-sidebar`'s own panel — ships a complete, ready-to-use look
 * rather than an unstyled box, since "a positioned card with a vertical list of links/buttons"
 * needs no per-use customization to be usable.
 */

.mlp-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--s-1));
  left: 0;
  z-index: 20;
  min-width: 12rem;
  padding: var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow);
}

/* For a trigger anchored at the right edge of its own container (a page-header's action row,
   say) — the default left-aligned menu opens flush with the trigger's left edge and extends
   rightward, which overflows off-screen when the trigger itself is already near the right edge
   of the viewport. This aligns the menu's right edge to the trigger's right edge instead, so it
   extends leftward and stays on-screen. */
.mlp-dropdown-menu--end {
  left: auto;
  right: 0;
}

.mlp-dropdown-menu a,
.mlp-dropdown-menu button {
  display: block;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--c-text);
  text-decoration: none;
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
}

.mlp-dropdown-menu a:hover,
.mlp-dropdown-menu button:hover {
  background: var(--c-accent-wash);
}