.mu-marquee {
  --duration: 40s;
  --gap: 1rem;
  position: relative;
  display: flex;
  gap: var(--gap);
  overflow: hidden;
  padding: 0.5rem;
}

.mu-marquee[data-vertical] {
  flex-direction: column;
}

.mu-marquee__track {
  display: flex;
  flex-shrink: 0;
  justify-content: space-around;
  gap: var(--gap);
  animation: mu-marquee var(--duration) linear infinite;
}

.mu-marquee[data-vertical] .mu-marquee__track {
  flex-direction: column;
  animation-name: mu-marquee-vertical;
}

.mu-marquee[data-reverse] .mu-marquee__track {
  animation-direction: reverse;
}

.mu-marquee[data-paused] .mu-marquee__track,
.mu-marquee[data-offscreen] .mu-marquee__track,
.mu-marquee[data-pause-on-hover]:hover .mu-marquee__track,
.mu-marquee[data-pause-on-hover]:focus-within .mu-marquee__track {
  animation-play-state: paused;
}

.mu-marquee__controls {
  display: flex;
  justify-content: flex-end;
  padding-inline: 0.5rem;
}

@keyframes mu-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--gap))); }
}

@keyframes mu-marquee-vertical {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-100% - var(--gap))); }
}

@media (prefers-reduced-motion: reduce) {
  .mu-marquee {
    flex-wrap: wrap;
    justify-content: center;
  }
  .mu-marquee__track {
    animation: none;
    flex-wrap: wrap;
    flex-shrink: 1;
  }
  .mu-marquee__track[data-clone],
  .mu-marquee__controls {
    display: none;
  }
}