@layer component.state {
  .ticker__iteration {
    animation: ticker_marquee 30s linear 0s infinite forwards;
    :hover > &,
    :focus-within > & {
      animation-play-state: paused;
    }
  }

  @keyframes ticker_marquee {
    from {
      transform: none;
    }
    to {
      transform: translateX(-100%);
    }
  }
}