/* Shared state movement. Feature styles may size a strip, but the tab
   relationship and moving indicator stay owned by this primitive. */
.state-swap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
}

.sliding-tabs {
  display: flex;
  align-items: center;
}

.sliding-tab {
  position: relative;
  border: var(--sliding-tab-border, none);
  background: transparent;
  color: var(--sliding-tab-color, var(--text-secondary));
  cursor: pointer;
  transition: color var(--motion-fast);
}

.sliding-tab:hover {
  color: var(--sliding-tab-hover-color, var(--text-primary));
}

.sliding-tab.active {
  color: var(--sliding-tab-active-color, var(--text-primary));
}

.sliding-tab-pill {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid var(--border-strong);
  border-radius: inherit;
  corner-shape: inherit;
  background: var(--surface-panel-raised);
}

.sliding-tab-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}