.popover {
  position: absolute;
  border-radius: 4px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
  background-color: white;
  min-width: 32px;
}
:global(.dark).popover {
  background-color: black;
  color: white;
}
.arrow {
  display: block;
  position: absolute;
  z-index: -1;
  border: 8px solid white;
  background-color: white;
  width: 8px;
  height: 8px;
}
:global(.dark).arrow {
  border-color: black;
  background-color: black;
}
:global(.left).arrow {
  right: -12px;
  transform: translate(-50%, -50%) rotate(135deg);
  box-shadow: -2px -2px 6px -2px rgba(0, 0, 0, 0.06);
}
:global(.right).arrow {
  left: 4px;
  transform: translate(-50%, -50%) rotate(-45deg);
  box-shadow: -2px -2px 6px -2px rgba(0, 0, 0, 0.06);
}
:global(.top).arrow {
  bottom: -12px;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 3px 3px 7px -2px rgba(0, 0, 0, 0.07);
}
:global(.bottom).arrow {
  top: 4px;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: -3px -3px 8px -2px rgba(0, 0, 0, 0.07);
}
.content {
  padding: 4px 8px;
}
.header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 4px 8px;
  line-height: 22px;
}
:global(.dark).header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
