.ads-Marquee {
  @apply flex
    flex-row
    relative
    overflow-x-hidden;

  width: var(--ads-marquee-width);
  transform: var(--ads-marquee-transform);
}

.ads-Marquee:hover div {
  animation-play-state: var(--ads-marquee-pause-on-hover);
}

.ads-Marquee:active div {
  animation-play-state: var(--ads-marquee-pause-on-click);
}

.ads-Marquee-overlay {
  @apply absolute
    w-full
    h-full;
}

.ads-Marquee-overlay::before,
.ads-Marquee-overlay::after {
  @apply absolute
    h-full
    pointer-events-none
    touch-none;

  background: linear-gradient(
    to right,
    var(--ads-marquee-gradient-color),
    rgb(255, 255, 255, 0)
  );
  content: "";
  width: var(--ads-marquee-gradient-width);
  z-index: 2;
}

.ads-Marquee-overlay::after {
  @apply right-0
    top-0;

  transform: rotateZ(180deg);
}

.ads-Marquee-overlay::before {
  @apply left-0
    top-0;
}

.ads-Marquee-content {
  @apply flex
    flex-row
    items-center
    z-default;

  flex: 0 0 auto;
  min-width: var(--ads-marquee-min-width);
  animation: marquee-scroll var(--ads-marquee-duration) linear
    var(--ads-marquee-delay) var(--ads-marquee-iteration-count);
  animation-play-state: var(--ads-marquee-play);
  animation-delay: var(--ads-marquee-delay);
  animation-direction: var(--ads-marquee-direction);
}

.ads-Marquee-children {
  @apply flex
    flex-row
    items-center
    min-w-auto;

  flex: 0 0 auto;
}

.ads-Marquee-child {
  transform: var(--ads-marquee-transform);
}