/* The moving highlight behind every horizontal switcher.
 *
 * Each of these used to paint its active state on the button itself, so switching meant
 * one button losing a colour while another gained one — two things blinking, never one
 * thing moving. A single element per switcher is placed over whichever item is active
 * and transitions between them; the buttons keep only their text colour.
 *
 * The fill is per component, because they do not look alike and should not start to:
 * the tab rows carry the primary gradient, the quieter pill rows their own soft tint.
 * Everything shares the timing, which is the point — one speed across the product.
 */
:root { --tab-slide: 180ms; }

.dm-view-tabs,
.account-tabs,
.pill-tabs,
.acct-tabs,
.segmented,
.dm-segmented { position: relative; }

.tab-slider {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 10px;
  pointer-events: none;
  transition: transform var(--tab-slide) var(--ease),
              width var(--tab-slide) var(--ease),
              height var(--tab-slide) var(--ease);
}
/* The first placement must not animate, or every switcher flies in from its top-left
   corner on page load. initSlidingTabs adds the class a frame later. */
.tab-slider:not(.is-ready) { transition: none; }
.tab-slider.is-empty { opacity: 0; }

/* Above the slider, and transparent so it shows through. */
.dm-view-tab,
.account-tab,
.pill-tab,
.acct-tab,
.segmented-btn,
.dm-segment-btn { position: relative; z-index: 1; }

/* Each switcher's own fill, moved off the button and onto the slider. The button keeps
   its rule as a fallback for anything that never runs the script — hence :has(). */
.dm-view-tabs .tab-slider,
.account-tabs .tab-slider {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-grad-end, var(--color-primary-hover)));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.account-tabs .tab-slider { border-radius: var(--radius-md); }
.dm-view-tabs:has(.tab-slider) .dm-view-tab.is-active,
.account-tabs:has(.tab-slider) .account-tab.is-active { background: transparent; box-shadow: none; }

.pill-tabs .tab-slider,
.acct-tabs .tab-slider { background: var(--color-primary-bg); }
.pill-tabs .tab-slider { border-radius: 10px; }
.acct-tabs .tab-slider { border-radius: 10px; }
.pill-tabs:has(.tab-slider) .pill-tab.is-active,
.acct-tabs:has(.tab-slider) .acct-tab.active { background: transparent; }

.segmented .tab-slider { background: var(--color-primary); }
.segmented:has(.tab-slider) .segmented-btn.is-active { background: transparent; }

.dm-segmented .tab-slider { background: var(--color-primary-bg); border-radius: 9px; }
.dm-segmented:has(.tab-slider) .dm-segment-btn.is-active { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .tab-slider { transition: none; }
}