/* GENERATED — run pnpm build:components. Source: packages/registry/horizontal-handoff/horizontal-handoff.css */

/**
 * Horizontal Handoff
 *
 * Reads tokens, never defines them. No global rules — every selector is scoped
 * under .vc-horizontal-handoff. Nothing here paints: no background, no border,
 * no radius. The panels are the buyer's, and this only decides where they sit.
 *
 * The unpinned rules below are the real fallback, not a degraded one. Without
 * the --pinned class this is an ordinary horizontal scroll container: every
 * panel reachable, the layout intact, and the scrolling the visitor's own.
 * That is the reduced-motion mode and the nothing-to-travel mode both.
 */

.vc-horizontal-handoff__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  /* Momentum on iOS, and no vertical rubber-banding fighting the page. */
  overscroll-behavior-x: contain;
}

/**
 * max-content, so the track is as wide as the panels put together rather than
 * as wide as its parent. Without it a flex row inside a clipped box would
 * squeeze every panel down to fit, and there would be nothing to travel.
 */
.vc-horizontal-handoff__track {
  display: flex;
  width: max-content;
  gap: var(--vc-hh-gap, 0);
}

/**
 * Pinned. The viewport sticks to the top of the scrollport for exactly as long
 * as the section is passing through it, and the track moves sideways by the
 * amount of that passage the visitor has covered.
 *
 * The height is a custom property so a buyer can hand it 100svh — which does
 * not resize when mobile browser chrome slides away, and so does not jump
 * mid-handoff — or a fixed height, without touching this file.
 */
.vc-horizontal-handoff--pinned .vc-horizontal-handoff__viewport {
  position: sticky;
  top: 0;
  height: var(--vc-hh-height, 100vh);
  overflow: hidden;
}

.vc-horizontal-handoff--pinned .vc-horizontal-handoff__track {
  height: 100%;
  transform: translate3d(var(--vc-hh-x, 0px), 0, 0);
}

/**
 * Belt and braces. The factory already declines to pin anything under reduced
 * motion; this covers the frame between a preference changing and the factory
 * hearing about it. Returning to `static` is safe here because the viewport is
 * an element the component created and nothing else styles.
 */
@media (prefers-reduced-motion: reduce) {
  .vc-horizontal-handoff--pinned .vc-horizontal-handoff__viewport {
    position: static;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .vc-horizontal-handoff--pinned .vc-horizontal-handoff__track {
    height: auto;
    transform: none;
  }
}