/*
 * Shared marquee styles.
 *
 * The widget renders two identical items inside a single animated track so the
 * scroll loop can wrap seamlessly.
 */
.rlm-marquee {
  --rlm-marquee-duration: 25s;
  --rlm-marquee-item-gap: 10px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.rlm-marquee__track {
  animation-duration: var(--rlm-marquee-duration);
  animation-iteration-count: infinite;
  animation-name: rlm-marquee-scroll;
  animation-play-state: running;
  animation-timing-function: linear;
  display: flex;
  min-width: max-content;
  white-space: nowrap;
  will-change: transform;
}

.rlm-marquee__item {
  display: inline-block;
  flex: 0 0 auto;
  margin: 0;
  padding-right: var(--rlm-marquee-item-gap);
  white-space: nowrap;
}

.rlm-marquee--pause-on-hover:hover .rlm-marquee__track {
  animation-play-state: paused;
}

@keyframes rlm-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rlm-marquee__track {
    animation: none;
    transform: none;
  }
}