@reference 'tailwindcss';

:host {
  --emr-marquee-animation-duration: 20s;
  --emr-marquee-gap: calc(var(--spacing) * 6);
  --emr-marquee-reverse: ;
  --emr-marquee-pause: running;

  display: block;
  width: 100%;

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--emr-marquee-gap);
    overflow: hidden;
    padding: 0.5rem;
    flex-direction: row;

    .item {
      flex-direction: row;
      animation: emr-marquee-animation var(--emr-marquee-animation-duration) infinite linear var(--emr-marquee-reverse);
    }

    .item {
      display: flex;
      gap: var(--emr-marquee-gap);
      flex-shrink: 0;
    }
  }

  .content:hover {
    & > .item {
      animation-play-state: var(--emr-marquee-pause);
    }
  }

  .content.out-of-view {
    & > .item {
      animation-play-state: paused;
    }
  }

  .invisible {
    width: 0;
    height: 0;
    display: none;
    pointer-events: none;
  }

  @keyframes emr-marquee-animation {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-100% - var(--emr-marquee-gap)));
    }
  }
}
