/* The action menu (components/action-menu.ts, Task 1.4j): a button with its word and ⌄, and its menu, which opens over the
   page in its top layer. The script puts the menu by its button (its top and left, from the window's corner); these
   rules give both their look. */
.am {
  display: inline-flex;
}

.am-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-block-size: var(--control-height);
  padding-inline: var(--space-3) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.am-button:hover,
.am.is-open .am-button {
  background: var(--color-info-soft);
}

.am-chevron {
  transition: transform 0.25s;
}

.am.is-open .am-chevron {
  transform: rotate(180deg);
}

/* the menu, over the popover's own look (a box in the middle of the window); in a browser without popovers, a plain box
   over the page and its top bar */
.am-menu {
  position: fixed;
  z-index: 40;
  inset: auto;
  margin: 0;
  min-inline-size: 11rem;
  max-block-size: calc(100dvh - 2 * var(--space-2));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-raised);
}

.am-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: var(--control-height);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.am-item:hover,
.am-item:focus-visible {
  background: var(--color-info-soft);
  color: var(--color-text);
}

.am-item:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* an item that can't be chosen now: greyed, and nothing happens on it (the keyboard still shows where it is) */
.am-item[aria-disabled="true"],
.am-item[aria-disabled="true"]:hover,
.am-item[aria-disabled="true"]:focus-visible {
  background: none;
  color: var(--color-muted);
  cursor: default;
}

.am-item[aria-disabled="true"] > * {
  opacity: 0.6;
}

/* the move's sign (⤒ ↑ ↓ ⤓), in a column of its own so the words line up */
.am-sign {
  flex: none;
  inline-size: 1.25em;
  color: var(--color-on-text);
  text-align: center;
}

.am-item[aria-disabled="true"] .am-sign {
  color: inherit;
}

/* a border, not a background, so it shows in high-contrast mode too */
.am-line {
  margin: var(--space-1) var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

/* A button's own panel (components/drop-panel.js, Task 7.22, part b: the old app's menus in its class, such as its raised
   hands): a box of rows with their own buttons, over the page in its top layer, by its button as the menu is, with the
   old app's small arrow toward its button on its edge (the script says where, --dp-arrow, from its start); what it holds
   scrolls inside it, never taller than what shows of the window (the script says how tall) */
.dp {
  position: relative;
  display: inline-flex;
}

.dp-panel {
  position: fixed;
  z-index: 40;
  inset: auto;
  margin: 0;
  overflow: visible;
  max-inline-size: calc(100vw - 2 * var(--space-2));
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-raised);
}

.dp-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3);
}

/* the arrow: a small triangle out of the panel's edge toward the button (under it, or over it when the panel opens over
   the button), its frame's colour, the panel's inside it */
.dp-panel::before,
.dp-panel::after {
  position: absolute;
  inset-inline-start: calc(var(--dp-arrow, 1rem) - 0.5rem);
  inline-size: 0;
  block-size: 0;
  border: 0.5rem solid transparent;
  content: "";
  pointer-events: none;
}

.dp-panel::before {
  inset-block-end: 100%;
  border-block-end-color: var(--color-border);
}

.dp-panel::after {
  inset-block-end: calc(100% - 1px);
  border-block-end-color: var(--color-surface);
}

.dp-panel.is-up::before {
  inset-block-start: 100%;
  inset-block-end: auto;
  border-block-start-color: var(--color-border);
  border-block-end-color: transparent;
}

.dp-panel.is-up::after {
  inset-block-start: calc(100% - 1px);
  inset-block-end: auto;
  border-block-start-color: var(--color-surface);
  border-block-end-color: transparent;
}

/* high contrast colours a border that's transparent: no arrow there (the panel's frame shows its place) */
@media (forced-colors: active) {
  .dp-panel::before,
  .dp-panel::after {
    display: none;
  }
}