/* The swap widget under the headline: swap card and route panel floating on the sky. */

.stage {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 20);
  pointer-events: none;
  user-select: none;
}

.widget { display: flex; align-items: flex-start; gap: 16px; }
.widget :is(.swap, .routing) {
  box-shadow:
    0 0 0 .5px var(--border-surface-strong),
    0 24px 48px -12px #1a2b4d29, 0 8px 16px -8px #1a2b4d1f;
}

/* Shrink the whole widget on narrower screens so the two cards keep their proportions. */
@media (max-width: 1060px) { .widget { zoom: .85; } }
@media (max-width: 860px) { .widget { zoom: .7; } }
@media (max-width: 720px) { .widget .routing { display: none; } .widget { zoom: .8; } }
@media (max-width: 420px) { .widget { zoom: .7; } }

.spinner {
  width: 12px;
  height: 12px;
  border: 1px solid var(--muted-foreground);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
@keyframes spin { to { rotate: 360deg; } }