/**
 * core/infinite-rail.css — styles for core/infinite-rail.js
 *
 * The rail owns layout and motion only; items keep whatever appearance the
 * caller gives them, so the same component suits pills, badges, chips or logos.
 * Per feedback_css_tokens_appcss: no static :root tokens are declared here —
 * --ir-gap / --ir-distance / --ir-duration are runtime values set by JS.
 */

.ir-rail {
  display: grid;
  gap: var(--ir-gap, 8px);
  inline-size: 100%;
  overflow: hidden;
  /* Fade the ends so items enter and leave instead of popping at a hard edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ir-row {
  overflow: hidden;
  display: flex;
}

.ir-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--ir-gap, 8px);
  padding-inline-end: var(--ir-gap, 8px);
  inline-size: max-content;
  will-change: transform;
  animation: irScroll var(--ir-duration, 30s) linear infinite;
}

/* Row direction: `right` reverses the leftward default so alternating rows
   travel opposite ways (row 0 right, row 1 left, row 2 right …). */
.ir-row[data-ir-dir="right"] .ir-track { animation-direction: reverse; }

.ir-pause-hover:hover .ir-track,
.ir-pause-hover:focus-within .ir-track { animation-play-state: paused; }

@keyframes irScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--ir-distance, 0px) * -1), 0, 0); }
}

/* Default item chrome — only applies when the caller does not style its own. */
.ir-item {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  /* No motion: show one copy as a normal scrollable row instead. */
  .ir-track { animation: none; }
  .ir-row { overflow-x: auto; scrollbar-width: none; }
  .ir-row::-webkit-scrollbar { display: none; }
  .ir-rail { -webkit-mask-image: none; mask-image: none; }
}