.TooltipPopup {
  display: flex;
  border-radius: var(--radius-3);
  font-size: var(--font-size-1);
  border: 1px solid var(--border-color);
  transform-origin: var(--transform-origin);
  transition:
    transform 150ms,
    opacity 150ms;

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transform: scale(0.9);
  }

  &[data-instant] {
    transition-duration: 0ms;
  }
}

.TooltipArrow {
  display: flex;

  &[data-side='top'] {
    bottom: -8px;
    rotate: 180deg;
  }

  &[data-side='bottom'] {
    top: -8px;
    rotate: 0deg;
  }

  &[data-side='left'] {
    right: -13px;
    rotate: 90deg;
  }

  &[data-side='right'] {
    left: -13px;
    rotate: -90deg;
  }
}

.TooltipArrowFill {
  fill: var(--surface);
}

.TooltipArrowOuterStroke {
  fill: var(--border-color);
}

.TooltipArrowInnerStroke {
  fill: var(--border-color);
}

.TooltipMessageContainer {
  margin: var(--space-2);
}