/**
 * Tabs Component - Design System Implementation
 * 
 * Pixel-perfect match to design.html tab switcher
 * Includes: the track and its sliding indicator; the tab buttons are .btn
 */

@layer components {
  /* ═══════════════════════════════════════════════════════════
     TABS CONTAINER
     ═══════════════════════════════════════════════════════════ */
  
  .input-top {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
  }
  
  .tabs-wrapper {
    position: relative;
    display: inline-flex;
    background: var(--color-bg-tabs);
    border-radius: var(--radius-sm);
    /* NO padding on wrapper - tabs have their own padding */
  }
  
  .tabs-list {
    display: flex;
    align-items: center;
    position: relative;
    z-index: var(--z-tabs-buttons, 1);
  }
  
  /* ═══════════════════════════════════════════════════════════
     SLIDING INDICATOR - Animated background
     ═══════════════════════════════════════════════════════════ */
  
  .tabs-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-surface-raised);
    /* The selected mode shows by an edge at 3:1 or more against the track, not only by the fill,
       which measured 1.13:1 on light and 1.01:1 on dark (audit C-3) */
    border: 1px solid var(--color-text-secondary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-icon);
    /* Only the position animates; the width snaps (animating width relays out every frame) */
    transition: transform var(--duration-medium) var(--ease-emphasized-decelerate);
    z-index: var(--z-tabs-indicator);
  }

  /* The tab buttons are ghost buttons (components-buttons.css); the indicator is their active fill,
     and the mode not chosen reads in the secondary text colour */
  .tab[aria-pressed="false"] {
    color: var(--color-text-secondary);
  }
}