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

.trigger {
  display: inline-flex;
  cursor: pointer;
}

/* Portal-rendered content — positioned via inline style */
.content {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  z-index: 500;
  animation: popoverIn 150ms ease-out;
  min-width: 160px;
}

@keyframes popoverIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Arrow ───────────────────────────────────────────────── */

.arrow {
  position: absolute;
  width: 0;
  height: 0;
}

/* Arrow pointing UP (content is below trigger) */
.arrow-bottom {
  top: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--bg-surface);
}

/* Arrow pointing DOWN (content is above trigger) */
.arrow-top {
  bottom: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--bg-surface);
}

/* Arrow pointing RIGHT (content is to the left of trigger) */
.arrow-left {
  right: -8px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid var(--bg-surface);
}

/* Arrow pointing LEFT (content is to the right of trigger) */
.arrow-right {
  left: -8px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid var(--bg-surface);
}

/* Arrow alignment for top/bottom positioned content */
.position-bottom.align-start .arrow-bottom,
.position-top.align-start .arrow-top {
  left: 12px;
}

.position-bottom.align-center .arrow-bottom,
.position-top.align-center .arrow-top {
  left: 50%;
  transform: translateX(-50%);
}

.position-bottom.align-end .arrow-bottom,
.position-top.align-end .arrow-top {
  right: 12px;
}

/* Arrow alignment for left/right positioned content */
.position-left.align-start .arrow-left,
.position-right.align-start .arrow-right {
  top: 12px;
}

.position-left.align-center .arrow-left,
.position-right.align-center .arrow-right {
  top: 50%;
  transform: translateY(-50%);
}

.position-left.align-end .arrow-left,
.position-right.align-end .arrow-right {
  bottom: 12px;
}
