/**
 * Tabs-Komponente
 * 
 * Tab-Navigation für das Umschalten zwischen verschiedenen Inhaltsbereichen.
 * Tabs ermöglichen ein platzsparendes Design für verschiedene Inhaltsgruppen.
 * 
 * @layer components.tabs
 * 
 * Grundlegende Verwendung:
 * <div class="tabs">
 *   <div class="nav">
 *     <button class="tab active">Tab 1</button>
 *     <button class="tab">Tab 2</button>
 *     <button class="tab">Tab 3</button>
 *   </div>
 *   <div class="content">
 *     <div class="panel active">Inhalt Tab 1</div>
 *     <div class="panel">Inhalt Tab 2</div>
 *     <div class="panel">Inhalt Tab 3</div>
 *   </div>
 * </div>
 * 
 * Varianten:
 * <div class="tabs pills">...</div>  <!-- Pill-Style Tabs -->
 * <div class="tabs underline">...</div>  <!-- Unterstrichene Tabs -->
 * <div class="tabs boxed">...</div>  <!-- Box-Style Tabs -->
 * 
 * Ausrichtungen:
 * <div class="tabs horizontal">...</div>  <!-- Horizontal (Standard) -->
 * <div class="tabs vertical">...</div>  <!-- Vertikale Tabs -->
 * 
 * Größen:
 * <div class="tabs sm">...</div>  <!-- Klein -->
 * <div class="tabs md">...</div>  <!-- Medium (Standard) -->
 * <div class="tabs lg">...</div>  <!-- Groß -->
 */


/**
 * Tabs Component Structure:
 * 
 * <div class="tabs">
 *   <div class="tabs-list" role="tablist">
 *     <button class="tab-item" role="tab" aria-selected="true">Tab 1</button>
 *     <button class="tab-item" role="tab">Tab 2</button>
 *   </div>
 *   <div class="tab-panels">
 *     <div class="tab-panel" role="tabpanel">Panel 1 content</div>
 *     <div class="tab-panel" role="tabpanel" hidden>Panel 2 content</div>
 *   </div>
 * </div>
 * 
 * Variants: .tabs--vertical, .tabs--pills, .tabs--underlined
 * Modifiers: .tabs--justify, .tabs--center
 */
@layer components {
  .tabs {
    display: flex;
    flex-direction: column;
    
    /* Tab-Navigation */
    .nav {
      border-bottom: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
      display: flex;
      gap: var(--tab-gap, var(--space-4, 1rem));
    }
    
    /* Tab-Buttons */
    .tab {
      background: none;
      border: none;
      color: var(--color-text-muted, var(--color-neutral-700, #374151));
      cursor: pointer;
      font-size: var(--text-base, var(--font-size-base, 1rem));
      padding: var(--tab-padding, 0.5rem 1rem);
      transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease), 
                  border-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
      
      &.active {
        border-bottom: 2px solid var(--color-primary-500, #3b82f6);
        color: var(--color-primary-600, #2563eb);
        font-weight: var(--font-medium, var(--font-weight-medium, 500));
      }
      
      &:hover:not(.active) {
        color: var(--color-primary-500, #3b82f6);
      }
      
      &:focus {
        box-shadow: 0 0 0 2px var(--color-primary-200, #bfdbfe);
        outline: none;
      }
      
      &:disabled {
        color: var(--color-neutral-400, #9ca3af);
        cursor: not-allowed;
        
        &:hover {
          color: var(--color-neutral-400, #9ca3af);
        }
      }
    }
    
    /* Inhaltsbereich */
    .content {
      padding: var(--tab-content-padding, 1rem 0);
    }
    
    /* Panel (Inhaltsbereich je Tab) */
    .panel {
      display: none;
      
      &.active {
        display: block;
      }
    }
    
    /* Varianten */
    &.pills {
      .nav {
        border-bottom: none;
        gap: var(--space-2, 0.5rem);
      }
      
      .tab {
        border-radius: var(--radius-full, 9999px);
        padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
        
        &.active {
          background-color: var(--color-primary-500, #3b82f6);
          border-bottom: none;
          color: var(--color-text-inverse, white);
        }
        
        &:hover:not(.active) {
          background-color: var(--color-neutral-100, #f3f4f6);
        }
      }
    }
    
    &.underline {
      .tab {
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        
        &.active {
          border-bottom-color: var(--color-primary-500, #3b82f6);
        }
      }
    }
    
    &.boxed {
      .nav {
        border-bottom: none;
        gap: 0;
      }
      
      .tab {
        background-color: var(--color-neutral-50, #f9fafb);
        border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
        border-bottom: none;
        border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0;
        margin-right: -1px;
        
        &.active {
          background-color: var(--color-background, white);
          position: relative;
          z-index: 1;
        }
      }
      
      .content {
        border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
        border-radius: 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) var(--radius-md, 0.375rem);
        padding: var(--space-4, 1rem);
      }
    }
    
    /* Ausrichtungen */
    &.horizontal {
      /* Standard (wie oben definiert) */
    }
    
    &.vertical {
      align-items: flex-start;
      flex-direction: row;
      
      .nav {
        border-bottom: none;
        border-right: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
        flex-direction: column;
        gap: var(--space-2, 0.5rem);
        margin-right: var(--space-4, 1rem);
        padding-right: var(--space-4, 1rem);
      }
      
      .tab {
        border-bottom: none;
        text-align: left;
        width: 100%;
        
        &.active {
          border-bottom: none;
          border-right: 2px solid var(--color-primary-500, #3b82f6);
          margin-right: -1px;
        }
      }
    }
    
    /* Größenvarianten */
    &.sm {
      .tab {
        font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
        padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
      }
      
      .content {
        padding: var(--space-2, 0.5rem) 0;
      }
    }
    
    &.lg {
      .tab {
        font-size: var(--text-lg, var(--font-size-lg, 1.125rem));
        padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
      }
      
      .content {
        padding: var(--space-6, 1.5rem) 0;
      }
    }
    
    /* Farbvarianten */
    &.success .tab.active {
      border-bottom-color: var(--color-success-500, #10b981);
      color: var(--color-success-600, #059669);
    }
    
    &.warning .tab.active {
      border-bottom-color: var(--color-warning-500, #f59e0b);
      color: var(--color-warning-600, #d97706);
    }
    
    &.error .tab.active {
      border-bottom-color: var(--color-error-500, #ef4444);
      color: var(--color-error-600, #dc2626);
    }
    
    &.secondary .tab.active {
      border-bottom-color: var(--color-secondary-500, #6b7280);
      color: var(--color-secondary-600, #4b5563);
    }
  }
}