/* Tooltip Component Styles - FlexNetJSX Architecture */

/* Tooltip Base */
.tooltip {
  position: absolute;
  padding: var(--spacing-sm);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
  z-index: var(--z-tooltip);
  white-space: nowrap;
}

/* Tooltip visibility on group hover */
.group:hover .tooltip {
  opacity: 1;
}

/* Tooltip Position - Top */
.tooltip--top {
  left: 0;
  bottom: 100%;
  margin-bottom: var(--spacing-sm);
  width: max-content;
}

/* Tooltip Position - Bottom */
.tooltip--bottom {
  left: 0;
  top: 100%;
  margin-top: var(--spacing-sm);
  width: max-content;
}

/* Tooltip Position - Left */
.tooltip--left {
  right: 100%;
  margin-right: var(--spacing-sm);
  height: 100%;
  top: 0;
}

/* Tooltip Position - Right */
.tooltip--right {
  left: 100%;
  margin-left: var(--spacing-sm);
  height: 100%;
  top: 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .tooltip {
    font-size: var(--text-xs);
    padding: var(--spacing-xs);
  }
  
  .tooltip--top,
  .tooltip--bottom {
    width: 200px;
    white-space: normal;
    text-align: center;
  }
}

/* Focus states for accessibility */
.tooltip:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Animation for tooltip appearance */
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tooltip--top,
.tooltip--bottom {
  animation: tooltipFadeIn 0.2s ease-out;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tooltip {
    transition: none;
  }
  
  .tooltip--top,
  .tooltip--bottom {
    animation: none;
  }
}