/* How a panel looks while its new content is on the way (static/js/swap.js). */

[data-swap] { position: relative; }

[data-swap].is-swapping { cursor: progress; }

/* The stories fade back a little; the tabs above them stay fully legible. */
[data-swap].is-swapping > :not(.board-nav):not(.news-tabs) {
  opacity: 0.45;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

/* A thin line travelling under the tabs, the same blue as the current tab. */
[data-swap].is-swapping::before {
  position: absolute;
  z-index: 2;
  top: 44px;
  right: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: #dde7f8;
  content: "";
}

[data-swap].is-swapping::after {
  position: absolute;
  z-index: 3;
  top: 44px;
  left: 0;
  width: 32%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 0%, transparent), var(--blue), color-mix(in srgb, var(--blue) 0%, transparent));
  animation: swap-travel 1s ease-in-out infinite;
  content: "";
}

@keyframes swap-travel {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  [data-swap].is-swapping > :not(.board-nav):not(.news-tabs) { transition: none; }
  [data-swap].is-swapping::after { animation: none; width: 100%; opacity: 0.5; }
}