/*
 * Modern CSS Anchor Positioning for Popovers
 * Uses position-area for simpler, more reliable positioning
 */

/* Triggers with unique anchor names via inline styles */
.popover-trigger {
  anchor-name: var(--anchor-name);
  cursor: pointer;
}

/* Popover content anchored to its specific trigger */
.popover-content {
  /* Anchors to the specific anchor name */
  position-anchor: var(--anchor-name);
  margin: 0;

  /* Default position: above the trigger, centered */
  position-area: top;

  /* Smooth transitions */
  opacity: 0;
  transition:
    opacity 0.2s,
    display 0.2s,
    overlay 0.2s;
  transition-behavior: allow-discrete;

  /*
   * Position fallbacks using position-area values
   * Browser will try each in order until one fits without overflow
   */
  position-try-fallbacks:
    bottom,
    top left,
    top right,
    bottom left,
    bottom right,
    flip-block,
    flip-inline,
    flip-block flip-inline;

  &:popover-open {
    display: block;
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }
}