/* Floating surfaces. .popover is the bare shell (anchor + canvas + border +
   shadow), shared by the account/comment menus and the reaction picker. .menu
   adds the vertical-list layout on top; the reaction picker composes .popover
   directly and keeps its own horizontal/upward layout (reactions.css). All are
   <details>-based. Consumers keep offset/width/radius deltas. */

@layer components {
  .popover {
    position: absolute;
    inset-inline-end: 0;
    z-index: 10;
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transition-property: opacity, transform;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
    transform-origin: var(--popover-origin, top right);

    @starting-style {
      opacity: 0;
      transform: scale(0.97);
    }
  }

  /* Composes .popover; adds the vertical menu list + rounded corners. */
  .menu {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem 0.4ch;
    border-radius: var(--radius-md);
  }

  /* The <summary> toggle: drop the native disclosure marker. */
  .menu__trigger {
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }

  /* A row in the menu. Color/weight stay with the consumer where they differ. */
  .menu__item {
    display: flex;
    align-items: center;
    gap: 0.75ch;
    padding: var(--menu-item-padding, 0.5rem var(--inline-space));
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    text-align: start;

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-surface-sunken);
        text-decoration: none;
      }
    }
  }
}