@layer ui-reset, ui;

/* marquee */
@layer ui {
  @keyframes ui-marquee-scroll {
    to {
      transform: translateX(calc(-100% - var(--marquee-gap)));
    }
  }

  .marquee {
    --marquee-gap: var(--ui-spacing-6);
    --marquee-duration: 20s;
    gap: var(--marquee-gap);
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
    mask-image: linear-gradient(90deg, transparent, black var(--ui-spacing-8), black calc(100% - var(--ui-spacing-8)), transparent);
    display: flex;
    overflow: hidden;

    & ul {
      align-items: center;
      gap: inherit;
      animation: ui-marquee-scroll var(--marquee-duration) linear infinite;
      flex-shrink: 0;
      display: flex;

      & li {
        flex-shrink: 0;
        list-style: none;
      }
    }

    &:hover ul {
      animation-play-state: paused;
    }

    &.reverse ul {
      animation-direction: reverse;
    }
  }
}