.marquee-tags {
  --gutter: 2.4rem;

  position: relative;
  display: flex;
  overflow: hidden;
  max-width: 10rem;
  margin-inline-start: auto;
  user-select: none;
  text-align: end;
  color: rgb(var(--color-tag-foreground));
  font-size: var(--font-size-static-sm);
  line-height: var(--line-height-static-sm);
  letter-spacing: var(--letter-spacing-medium);
  text-transform: uppercase;
}

.marquee-tags__items {
  flex-shrink: 0;
  display: flex;
  min-width: 100%;
  --scroll-transform-translate-x: -100%;
  animation: scroll 6s linear infinite;
}
[dir='rtl'] .marquee-tags__items {
  --scroll-transform-translate-x: 100%;
}

.marquee-tags__items + .marquee-tags__items {
  margin-inline-start: var(--gutter);
}

.marquee-tags__item + .marquee-tags__item {
  margin-inline-start: var(--gutter);
}

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

  to {
    transform: translateX(calc(var(--scroll-transform-translate-x) - var(--gutter)));
  }
}