/*
 * Popover implementation with unique anchoring
 * Each popover needs a unique anchor to work correctly
 */

/* 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 {
  border-radius: var(--panel-border-radius, 1em);

  /* Reset inherited styles */
  font-weight: normal;
  text-transform: none;

  /* Anchors to the specific anchor name */
  position-anchor: var(--anchor-name);
  margin: 0;
  inset: auto;
  transform: none;

  /* Default: centered above the trigger */
  bottom: anchor(top);
  left: anchor(center);

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

  /* Try different positions if default doesn't fit */
  position-try-fallbacks:
    --below-center, --above-left, --above-right, --below-left, --below-right,
    --left-center, --right-center;

  & > * {
    padding: 0.5rem;
  }

  &:popover-open {
    display: block; /* Override Bootstrap's dialog { display: none } */
    opacity: 1;

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

/* Fallback: centered below trigger */
@position-try --below-center {
  inset: auto;
  top: anchor(bottom);
  left: anchor(center);
}

/* Fallback: above trigger, left-aligned */
@position-try --above-left {
  inset: auto;
  bottom: anchor(top);
  left: anchor(left);
}

/* Fallback: above trigger, right-aligned */
@position-try --above-right {
  inset: auto;
  bottom: anchor(top);
  right: anchor(right);
}

/* Fallback: below trigger, left-aligned */
@position-try --below-left {
  inset: auto;
  top: anchor(bottom);
  left: anchor(left);
}

/* Fallback: below trigger, right-aligned */
@position-try --below-right {
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);
}

/* Fallback: left of trigger, vertically centered */
@position-try --left-center {
  inset: auto;
  right: anchor(left);
  top: anchor(center);
}

/* Fallback: right of trigger, vertically centered */
@position-try --right-center {
  inset: auto;
  left: anchor(right);
  top: anchor(center);
}