.wrapper {
  position: relative;
  display: inline-flex;
}

.tooltip {
  position: absolute;
  z-index: var(--z-dropdown);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-0);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  pointer-events: none;
  animation: tooltipIn var(--transition-fast) ease;
}

.top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--space-1);
}

.bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-1);
}

.left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: var(--space-1);
}

.right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: var(--space-1);
}

@keyframes tooltipIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
