/*
 * Tooltip
 * Positions: top, bottom, left, right
 */

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

.tooltip-content {
  position: absolute;
  z-index: var(--z-dropdown);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-inverse);
  background: var(--color-text);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.tooltip:hover .tooltip-content,
.tooltip:focus-within .tooltip-content {
  opacity: 1;
}

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

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

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

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