@use '../abstracts' as *
@use '../base' as *
@use 'sass:color'  // Already there for adjusts

// Tooltip styling (mouse-follow version)
.tooltip
  position: relative
  display: inline-block
  cursor: help
  font-size: 16px
  color: $accent-light  // Green accent for ?
  margin-left: space('xs')  // 0.25rem
  top: 2px

  .tooltiptext
    visibility: hidden
    width: 200px
    background-color: $bg-darker  // Darker bg
    color: $text-light  // White text
    text-align: left  // Changed to left-align for better readability
    border-radius: 0  // Square
    padding: space('sm')  // 0.5rem
    position: fixed  // Fixed to viewport, updated by JS
    z-index: z('dropdown')  // High z-index
    opacity: 0
    transition: opacity 0.3s
    font-size: 14px
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)  // Subtle shadow
    pointer-events: none  // Prevents mouse interference with tooltip

    &::after
      content: ""
      position: absolute
      top: -5px  // Arrow above tooltip (points up to mouse)
      left: 10px  // Slight indent from left edge
      border-width: 5px
      border-style: solid
      border-color: $bg-darker transparent transparent transparent  // Upward arrow

  &:hover .tooltiptext
    visibility: visible
    opacity: 1

// Accessibility: Hidden tooltip text for screen readers
.tooltip-desc
  position: absolute
  left: -9999px