theme-scrolling {
  display: flex;
  align-items: center;
  overflow: hidden;
}
theme-scrolling[pause-on-hover]:hover .scrolling--animated,
.scrolling--paused .scrolling--animated {
  animation-play-state: paused;
}
.scrolling {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.scrolling-track {
  padding-inline: calc(var(--item-gap, 48px) / 2);
  flex: 0 0 auto;
}
.scrolling--left .scrolling--animated {
  animation-name: scrolling-left;
}
html[dir="rtl"] .scrolling--left .scrolling--animated {
  animation-name: rtl-scrolling-left;
}
.scrolling--right .scrolling--animated {
  animation-name: scrolling-right;
}
html[dir="rtl"] .scrolling--right .scrolling--animated {
  animation-name: rtl-scrolling-right;
}
.scrolling--animated {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: var(--duration, 5s);
  animation-play-state: running;
  width: max-content;
  will-change: transform, width;
}
@keyframes scrolling-left {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes rtl-scrolling-left {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes scrolling-right {
  0% {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rtl-scrolling-right {
  0% {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scrolling-track {
    will-change: auto;
  }
}