@layer components {
  /* 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>
   */

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

  .dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.375em 0.75em;
    font: inherit;
    color: var(--color-text);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition-fast);

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

  .dropdown__menu {
    /* Reset popover defaults */
    margin: 0;
    padding: var(--space-1) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-canvas);
    color: var(--color-text);
    box-shadow: var(--shadow-md);
    min-width: 12rem;

    /* Position below trigger */
    position-area: bottom span-right;
    position-try-fallbacks: flip-block;
    margin-block-start: var(--space-1);

    /* Entry animation */
    opacity: 1;
    translate: 0;
    transition:
      opacity var(--transition-fast),
      translate var(--transition-fast),
      overlay var(--transition-fast) allow-discrete,
      display var(--transition-fast) allow-discrete;

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

  .dropdown__item {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition-fast);

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

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

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

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

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