/* Dropdowns
 * Uses the Popover API for light dismiss, top-layer rendering, and
 * automatic aria-expanded. No JavaScript needed for open/close.
 *
 * Usage:
 *   <div class="dropdown">
 *     <button class="dropdown__trigger" popovertarget="my-menu">Actions</button>
 *     <div id="my-menu" popover="auto" class="dropdown__menu" role="menu">
 *       <a class="dropdown__item" role="menuitem" href="/edit">Edit</a>
 *       <a class="dropdown__item" role="menuitem" href="/dup">Duplicate</a>
 *       <hr class="dropdown__separator">
 *       <a class="dropdown__item dropdown__item--danger" role="menuitem" href="/del">Delete</a>
 *     </div>
 *   </div>
 */

@layer components {
  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-s);
    min-height: var(--touch-min);
    padding: 0.375em 0.75em;
    font: inherit;
    color: var(--color-ink);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 100ms ease;

    &:hover {
      background: var(--color-surface);
    }
  }

  .dropdown__menu {
    /* Reset popover defaults */
    margin: 0;
    padding: 0.375rem 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: 0 8px 32px oklch(0% 0 0 / 0.15);
    min-width: 14rem;

    /* Position below trigger */
    position-area: bottom span-right;
    position-try-fallbacks: flip-block;
    margin-block-start: 0.5rem;

    /* Entry animation */
    opacity: 1;
    translate: 0;
    transition:
      opacity 120ms ease,
      translate 120ms ease,
      overlay 120ms ease allow-discrete,
      display 120ms ease allow-discrete;

    @starting-style {
      opacity: 0;
      translate: 0 -0.25rem;
    }
  }

  .dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--inline-space-s);
    min-height: var(--touch-min);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    color: var(--color-ink);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: start;
    cursor: pointer;
    transition: background 80ms ease;

    &:hover {
      background: color-mix(in oklch, var(--color-ink) 6%, transparent);
    }

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

    & svg {
      flex-shrink: 0;
      color: var(--color-ink-muted);
    }
  }

  .dropdown__item--danger {
    color: var(--color-negative);

    &:hover {
      background: color-mix(in oklch, var(--color-negative) 6%, transparent);
    }

    & svg {
      color: var(--color-negative);
    }
  }

  .dropdown__separator {
    border: none;
    border-block-start: 1px solid var(--color-border);
    margin-block: 0.25rem;
  }
}