.px-popup-content {
  --text-color: var(--px-neutral-10);
  padding: 4px 8px;
  display: inline-block;
  border-color: transparent;
  border-width: var(--px-bit);
  border-style: solid;
  background-color: transparent;
  box-sizing: border-box;
  position: absolute;
  color: var(--text-color);
  white-space: pre-line;
  min-height: calc(28px + 2 * var(--px-bit));
  min-width: 36px;
  width: max-content;
  transition: transform var(--px-animation-duration, 0.25s), opacity var(--px-animation-duration, 0.25s);
}
.px-popup-content-fade__top-enter-to,
.px-popup-content-fade__top-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.px-popup-content-fade__top-enter-from,
.px-popup-content-fade__top-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
.px-popup-content-fade__bottom-enter-to,
.px-popup-content-fade__bottom-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.px-popup-content-fade__bottom-enter-from,
.px-popup-content-fade__bottom-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
.px-popup-content-fade__left-enter-to,
.px-popup-content-fade__left-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.px-popup-content-fade__left-enter-from,
.px-popup-content-fade__left-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}
.px-popup-content-fade__right-enter-to,
.px-popup-content-fade__right-leave-from {
  opacity: 1;
  transform: translateX(0);
}
.px-popup-content-fade__right-enter-from,
.px-popup-content-fade__right-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
.px-popup-content__dark {
  --text-color: var(--px-neutral-1);
}
.px-popup-content__top.px-popup-content__arrow {
  min-height: calc(var(--px-bit) * 12);
  padding-bottom: calc(4px + var(--px-bit) * 2);
}
.px-popup-content__top.px-popup-content__arrow .px-popup-content-arrow {
  bottom: calc(-1 * var(--px-bit));
}
.px-popup-content__bottom.px-popup-content__arrow {
  min-height: calc(var(--px-bit) * 12);
  padding-top: calc(4px + var(--px-bit) * 2);
}
.px-popup-content__bottom.px-popup-content__arrow .px-popup-content-arrow {
  top: calc(-1 * var(--px-bit));
}
.px-popup-content__left.px-popup-content__arrow {
  min-width: calc(var(--px-bit) * 12);
  padding-right: calc(8px + var(--px-bit) * 2);
}
.px-popup-content__left.px-popup-content__arrow .px-popup-content-arrow {
  right: calc(-1 * var(--px-bit));
}
.px-popup-content__right.px-popup-content__arrow {
  min-width: calc(var(--px-bit) * 12);
  padding-left: calc(8px + var(--px-bit) * 2);
}
.px-popup-content__right.px-popup-content__arrow .px-popup-content-arrow {
  left: calc(-1 * var(--px-bit));
}
.px-popup-content-arrow {
  position: absolute;
}
.px-popup-content-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}