/**
 * Tooltip-Komponente
 * 
 * Informations-Tooltips und Hinweistexte für UI-Elemente.
 * Tooltips bieten zusätzliche Informationen oder Hilfestellungen zu Elementen.
 * 
 * @layer components.tooltip
 * 
 * Grundlegende Verwendung:
 * <div class="tooltip">
 *   <button class="trigger">Hover mich</button>
 *   <div class="content">Tooltip-Inhalt</div>
 * </div>
 * 
 * Positionsvarianten:
 * <div class="tooltip top">Oben</div>
 * <div class="tooltip right">Rechts</div>
 * <div class="tooltip bottom">Unten</div>
 * <div class="tooltip left">Links</div>
 * 
 * Größenvarianten:
 * <div class="tooltip sm">Klein</div>
 * <div class="tooltip md">Mittel (Standard)</div>
 * <div class="tooltip lg">Groß</div>
 * 
 * Varianten:
 * <div class="tooltip light">Heller Hintergrund</div>
 * <div class="tooltip dark">Dunkler Hintergrund (Standard)</div>
 * <div class="tooltip primary">Primärfarbe</div>
 * 
 * Mit Pfeil:
 * <div class="tooltip arrow">
 *   <button class="trigger">Mit Pfeil</button>
 *   <div class="content">Tooltip mit Pfeil</div>
 * </div>
 * 
 * Mit HTML-Inhalt:
 * <div class="tooltip">
 *   <button class="trigger">Komplexer Inhalt</button>
 *   <div class="content">
 *     <h4>Überschrift</h4>
 *     <p>Mehrere Zeilen Text sind möglich.</p>
 *   </div>
 * </div>
 * 
 * Flüssig skalierende Tooltips (nutzt interpolate-size):
 * <div class="tooltip adaptive">
 *   <button class="trigger">Adaptiver Tooltip</button>
 *   <div class="content">Dieser Tooltip skaliert flüssig mit der Container-Größe</div>
 * </div>
 * 
 * Mit Schlüsselwort-Größen:
 * <div class="tooltip fluid small">Klein</div>
 * <div class="tooltip fluid medium">Mittel</div>
 * <div class="tooltip fluid large">Groß</div>
 */


/**
 * Tooltip Component Structure:
 * 
 * <div class="tooltip" role="tooltip">
 *   <div class="tooltip-content">Tooltip text</div>
 *   <div class="tooltip-arrow"></div>
 * </div>
 * 
 * Positions: .tooltip--top, .tooltip--bottom, .tooltip--left, .tooltip--right
 * Modifiers: .tooltip--sm, .tooltip--lg
 */
@layer components {
  .tooltip {
    display: inline-block;
    position: relative;
    
    .trigger {
      cursor: pointer;
      display: inline-block;
    }
    
    .content {
      background-color: var(--color-neutral-900, #111827);
      border-radius: var(--radius-sm, 0.25rem);
      box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));
      color: var(--color-text-inverse, white);
      font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
      max-width: var(--tooltip-max-width, 200px);
      opacity: 0%;
      padding: var(--tooltip-padding, 0.5rem 0.75rem);
      position: absolute;
      transition: opacity var(--transition-duration-fast, 200ms) var(--transition-timing-ease, ease), 
                  visibility var(--transition-duration-fast, 200ms) var(--transition-timing-ease, ease);
      visibility: hidden;
      white-space: nowrap;
      z-index: var(--z-index-tooltip, 1000);
    }
    
    /* Trigger-Interaktion */
    &:hover .content,
    .trigger:focus + .content {
      opacity: 1;
      visibility: visible;
    }
    
    /* Positionsvarianten */
    &.top .content {
      bottom: 100%;
      left: 50%;
      margin-bottom: var(--space-1, 0.25rem);
      transform: translateX(-50%) translateY(-8px);
    }
    
    &.right .content {
      left: 100%;
      margin-left: var(--space-1, 0.25rem);
      top: 50%;
      transform: translateY(-50%) translateX(8px);
    }
    
    &.bottom .content {
      left: 50%;
      margin-top: var(--space-1, 0.25rem);
      top: 100%;
      transform: translateX(-50%) translateY(8px);
    }
    
    &.left .content {
      margin-right: var(--space-1, 0.25rem);
      right: 100%;
      top: 50%;
      transform: translateY(-50%) translateX(-8px);
    }
    
    /* Größenvarianten */
    &.sm .content {
      font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
      padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    }
    
    &.lg .content {
      font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
      max-width: 25%0px;
      padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
      white-space: normal;
    }
    
    /* Farbvarianten */
    &.light .content {
      background-color: var(--color-background, white);
      border: 1px solid var(--color-border, var(--color-neutral-200, #e5e7eb));
      color: var(--color-text, var(--color-neutral-900, #111827));
    }
    
    &.dark .content {
      background-color: var(--color-neutral-900, #111827);
      color: var(--color-text-inverse, white);
    }
    
    &.primary .content {
      background-color: var(--color-primary-500, #3b82f6);
      color: var(--color-text-inverse, white);
    }
    
    &.success .content {
      background-color: var(--color-success-500, #10b981);
      color: var(--color-text-inverse, white);
    }
    
    &.warning .content {
      background-color: var(--color-warning-500, #f59e0b);
      color: var(--color-warning-900, #78350f);
    }
    
    &.error .content {
      background-color: var(--color-error-500, #ef4444);
      color: var(--color-text-inverse, white);
    }
    
    /* Flüssig skalierende Tooltips mit interpolate-size: allow-keywords */
    &.fluid {
      /* Basisgröße verwenden */
      font-size: medium;
      
      .content {
        border-radius: 0.25em;
        box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 2000%);
        font-size: 0.8em;

        /* em-Einheiten für flüssige Skalierung basierend auf font-size */
        padding: 0.5em 0.75em;
      }
      
      /* Größenvarianten mit CSS-Schlüsselwörtern */
      &.small {
        font-size: small;
      }
      
      &.medium {
        font-size: medium;
      }
      
      &.large {
        font-size: large;
      }
      
      &.x-large {
        font-size: x-large;
      }
    }
    
    /* Container-adaptive Tooltips */
    &.adaptive {
      container-type: inline-size;
      
      .content {
        border-radius: clamp(var(--radius-sm, 0.25rem), 0.5cqi, var(--radius-md, 0.375rem));
        font-size: clamp(var(--text-xs, 0.75rem), 2cqi, var(--text-base, 1rem));
        max-width: 90%cqi; /* 90 der Container-Breite */
        padding: clamp(var(--space-1, 0.25rem), 1cqi, var(--space-4, 1rem));
        white-space: normal;
      }
      
      &.arrow .content::before {
        height: clamp(6px, 1cqi, 12px);
        width: clamp(6px, 1cqi, 12px);
      }
    }
    
    /* Mit Pfeil */
    &.arrow .content::before {
      background-color: inherit;
      border: inherit;
      border-width: 1px;
      content: "";
      height: var(--tooltip-arrow-size, 8px);
      position: absolute;
      transform: rotate(45deg);
      width: var(--tooltip-arrow-size, 8px);
    }
    
    &.arrow.top .content::before {
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
    }
    
    &.arrow.right .content::before {
      left: -4px;
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
    
    &.arrow.bottom .content::before {
      left: 50%;
      top: -4px;
      transform: translateX(-50%) rotate(45deg);
    }
    
    &.arrow.left .content::before {
      right: -4px;
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
  }
}