.ui-tooltip {
  position: fixed;
  z-index: var(--ui-z-tooltip);
  padding: var(--ui-space-1) var(--ui-space-3);
  background: var(--ui-color-text);
  color: var(--ui-color-surface);
  font-family: var(--ui-font);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-normal);
  line-height: var(--ui-line-height-tight);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  transition:
    opacity var(--ui-duration-fast) var(--ui-easing-default),
    transform var(--ui-duration-fast) var(--ui-easing-default),
    visibility 0s var(--ui-duration-fast);
}
.ui-tooltip.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition:
    opacity var(--ui-duration-fast) var(--ui-easing-default),
    transform var(--ui-duration-fast) var(--ui-easing-default),
    visibility 0s;
}