.tooltip {
  transform-origin: var(--radix-tooltip-content-transform-origin);
  animation: scaleIn $duration-zoom ease-out;
  background: var(--dialog-bg);
  border-radius: $input-corner;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  color: var(--text-tertiary);
  font-size: $font-tiny;
  font-weight: $medium;
  line-height: 1.3;
  padding: $unit * 1.5;
  z-index: 35;
  max-width: 200px;

  @keyframes scaleIn {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    20% {
      opacity: 0.2;
      transform: scale(0.4);
    }
    40% {
      opacity: 0.4;
      transform: scale(0.8);
    }
    60% {
      opacity: 0.6;
      transform: scale(1);
    }
    65% {
      opacity: 0.65;
      transform: scale(1.1);
    }
    70% {
      opacity: 0.7;
      transform: scale(1);
    }
    75% {
      opacity: 0.75;
      transform: scale(0.98);
    }
    80% {
      opacity: 0.8;
      transform: scale(1.02);
    }
    90% {
      opacity: 0.9;
      transform: scale(0.96);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}