/**
 * Tabs CSS Anchor Positioning.
 *
 * Zero-JS position tracking for the sliding indicator using CSS Anchor API.
 * The indicator automatically follows the active tab via anchor positioning.
 */

/* Scope anchors per Tabs instance */
[data-slot="tabs-list"] {
  anchor-scope: --tabs-active;
}

/* Active tab becomes the anchor */
[data-slot="tabs-tab"][data-active] {
  anchor-name: --tabs-active;
}

/* Indicator follows the active anchor */
[data-slot="tabs-indicator"] {
  position-anchor: --tabs-active;
  left: anchor(left);
  right: anchor(right);
  transition:
    top 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    right 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    bottom 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  [data-slot="tabs-indicator"] {
    transition-duration: 0ms;
  }
}