.menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-md);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.menu-button::after {
  content: "▾";
}

.menu-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The popover panel draws the box; the list only sets the width floor. */
.menu-list {
  min-width: 12rem;
}

.menu-item {
  display: flex;
}

.menu-link {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--text-md);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* display: block outranks the browser's own [hidden] rule, so an item
   rendered hidden (an alternative already in use) would still show. */
.menu-link[hidden] {
  display: none;
}

.menu-link:hover {
  background: var(--surface-sunken);
}

.menu-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.menu-link-danger {
  color: var(--danger-ink);
}

.menu-link[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.menu-button-small {
  min-height: var(--tap-dense);
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
}

@media (pointer: fine) {
  .menu-button {
    min-height: var(--tap-fine);
  }

  .menu-button-small {
    min-height: var(--tap-dense);
  }
}

.menu-chip {
  cursor: pointer;
}

/* A filled menu is as wide as its box at most, so it drops the floor. */
.menu-list-fill {
  min-width: 0;
}

.menu-link-wrap {
  white-space: normal;
}