void-popover {
  position: relative;
  display: inline-flex;
}

void-popover > :not(:first-child):not(.void-popover-body) {
  display: none;
}

.void-popover-body {
  display: none;
  position: absolute;
  z-index: var(--void-z-dropdown);
  min-width: 12rem;
  background: var(--void-color-bg-elevated);
  border: 1px solid var(--void-color-border);
  border-radius: var(--void-radius-md);
  padding: var(--void-space-3);
  box-shadow: 0 4px 16px var(--void-color-bg-overlay);
  font-family: var(--void-font-sans);
  font-size: var(--void-text-sm);
  color: var(--void-color-text);
  transition: opacity var(--void-duration-fast) var(--void-ease-in-out);
}

void-popover[open] .void-popover-body {
  display: block;
}

void-popover[position="bottom"] .void-popover-body {
  top: calc(100% + var(--void-space-2));
  left: 0;
}

void-popover[position="top"] .void-popover-body {
  bottom: calc(100% + var(--void-space-2));
  left: 0;
}

void-popover[position="left"] .void-popover-body {
  right: calc(100% + var(--void-space-2));
  top: 0;
}

void-popover[position="right"] .void-popover-body {
  left: calc(100% + var(--void-space-2));
  top: 0;
}