/* What the `dropdown` controller opens: a panel floating over the page — a
   menu, a picker, a help bubble, a list of suggestions — the rows inside it,
   and the small square icon button a row carries. Zero specificity, so a
   panel's own anchoring, size and padding win. */

@layer components {
  :where(.popover) {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-popover);
    padding: 0.375rem;
    position: absolute;
    z-index: var(--z-popover);
  }

  /* A row of the panel — a button, a link or a label over a radio. */
  :where(.popover__item) {
    align-items: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-ink-secondary);
    cursor: pointer;
    display: flex;
    font-size: 0.9375rem;
    gap: 0.625rem;
    inline-size: 100%;
    padding: 0.5rem 0.625rem;
    text-align: start;
    text-decoration: none;
  }

  :where(.popover__item:hover) {
    background: var(--color-surface-tint);
  }

  :where(.popover__item:disabled) {
    color: var(--color-ink-faint);
    cursor: default;
    opacity: 0.6;
  }

  :where(.popover__item--danger) {
    color: var(--color-negative);
  }

  :where(.popover__item--danger:hover) {
    background: var(--color-negative-tint);
  }

  :where(.popover__separator) {
    border-block-start: 1px solid var(--color-border-subtle);
    margin: 0.3rem 0.25rem;
  }

  /* A 2rem square around a glyph: quiet until hovered, then brand — or, for
     a destructive one, the negative tint. */
  :where(.icon-btn) {
    align-items: center;
    background: none;
    block-size: 2rem;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-ink-faint);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    inline-size: 2rem;
    justify-content: center;
    padding: 0;
  }

  :where(.icon-btn:hover) {
    background: var(--color-surface-tint);
    color: var(--color-brand);
  }

  :where(.icon-btn--danger:hover) {
    background: var(--color-negative-tint);
    color: var(--color-negative-strong);
  }
}