@layer components {
  .tab-focus-pill {
    transform: translateX(
      calc(
        var(--tab-index, 0) * -100% + var(--active-tab, 0) * 100% -
          (var(--spacing) * 4 * (var(--tab-index) - var(--active-tab, 0)))
      )
    );
  }

  [dir='rtl'] .tab-focus-pill {
    transform: translateX(
      calc(
        var(--tab-index) * 100% + var(--active-tab) * -100% +
          (var(--spacing) * 4 * (var(--tab-index) - var(--active-tab)))
      )
    );
  }
}
