/* Dropdown: a short menu that opens under its trigger — add to calendar,
   directions. The menu is a native popover (Esc and a click outside close
   it), anchored to the wrapper by CSS anchor positioning; without that it
   opens in the middle of the screen.

   <div class="dropdown">
     <button popovertarget="…">…</button>
     <div popover class="dropdown__menu">
       <a class="dropdown__item">…</a>
     </div>
   </div>

   application/menu/popover and menu/link render the menu and its items with
   appearance: :shop. */
.dropdown {
  anchor-name: --dropdown;
  anchor-scope: --dropdown;
  display: inline-block;
}

.dropdown__menu {
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--color-subtle);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-overlay);
  color: var(--color-text);
  min-inline-size: 12rem;
  opacity: 0;
  padding: var(--space-3xs);
  scale: 0.96;
  transform-origin: top left;
  transition:
    display var(--duration-fast) allow-discrete,
    overlay var(--duration-fast) allow-discrete,
    opacity var(--duration-fast) var(--ease-out),
    scale var(--duration-fast) var(--ease-out);

  &:popover-open {
    opacity: 1;
    scale: 1;
  }

  @starting-style {
    &:popover-open {
      opacity: 0;
      scale: 0.96;
    }
  }
}

@supports (anchor-name: --x) {
  .dropdown__menu {
    inset: auto;
    left: anchor(left);
    margin: 0;
    position-anchor: --dropdown;
    position-try-fallbacks: flip-inline;
    top: calc(anchor(bottom) + var(--space-3xs));
  }
}

.dropdown__item {
  align-items: center;
  border-radius: var(--radius-s);
  color: var(--color-text);
  display: flex;
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  text-decoration: none;
  white-space: nowrap;

  &:hover,
  &:focus-visible {
    background: var(--color-surface-2);
    outline: none;
  }

  .icon {
    --icon-color: var(--color-muted);
  }
}