.tooltip {
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: 10;
  opacity: 0;
}
.tooltip.tooltip--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.tooltip.removing {
  opacity: 0;
}
.tooltip__inner {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  padding: 4px 12px;
  color: #fff;
  position: relative;
  white-space: nowrap;
  background: var(--wp--preset--color--black);
}
.tooltip__detail {
  display: block;
  position: absolute;
}
.tooltip--bottom {
  margin-top: 5px;
  transform: translate3d(0, 3px, 0);
}
.tooltip--bottom .tooltip__detail {
  border-right: 3px solid transparent;
  border-bottom: 3px solid var(--wp--preset--color--black);
  border-left: 3px solid transparent;
  top: -3px;
  left: calc(50% - 3px);
}
.tooltip--bottom.removing {
  transform: translate3d(0, 5px, 0);
}
.tooltip--right {
  transform: translate3d(5px, 0, 0);
}
.tooltip--right .tooltip__detail {
  border-top: 3px solid transparent;
  border-right: 3px solid var(--wp--preset--color--black);
  border-bottom: 3px solid transparent;
  left: -3px;
  top: calc(50% - 3px);
}
.tooltip--right.removing {
  transform: translate3d(5px, 0, 0);
}
.tooltip--left {
  transform: translate3d(-5px, 0, 0);
}
.tooltip--left .tooltip__detail {
  border-top: 3px solid transparent;
  border-left: 3px solid var(--wp--preset--color--black);
  border-bottom: 3px solid transparent;
  right: -3px;
  top: calc(50% - 3px);
}
.tooltip--left.removing {
  transform: translate3d(-5px, 0, 0);
}
/*# sourceMappingURL=tooltip.css.map */