.marquee-bar {
  overflow: hidden;
  background-color: rgba(var(--color-background));
  color: rgba(var(--color-text));
}

.marquee-bar__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-bar-scroll var(--marquee-bar-duration, 40s) linear infinite;
}

.marquee-bar__track--right {
  animation-direction: reverse;
}

.marquee-bar:hover .marquee-bar__track {
  animation-play-state: paused;
}

.marquee-bar__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.marquee-bar__item {
  display: flex;
  flex-shrink: 0;
  gap: 0.5em;
  align-items: center;
  white-space: nowrap;
}

.marquee-bar__text {
  font-family: var(--font-accent, var(--sort-display-font));
  font-size: var(--body1-font-size);
  font-weight: 300;
  line-height: 1.2;
}

.marquee-bar__separator {
  font-family: var(--font-accent, var(--sort-display-font));
  font-size: var(--body1-font-size);
  font-weight: 300;
  color: rgba(var(--color-light-text));
}

.marquee-bar__icon {
  width: 1.6em;
  height: 1.6em;
  object-fit: contain;
}

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

  to {
    transform: translateX(calc(-1 * var(--marquee-distance, 50%)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-bar__track {
    animation: none;
  }
}