/* ==========================================
   Logo Marquee
   template-parts/components/logo-marquee.php
   ========================================== */

.logo-marquee {
  overflow: hidden;
  /* Fade the logos in and out at the edges instead of hard-clipping them. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
}

.logo-marquee-track {
  display: flex;
  width: max-content;
  /* Speed stays constant however many logos there are. */
  animation: logo-marquee calc(var(--marquee-count, 20) * 1.5s) linear infinite;
}

.logo-marquee-list {
  display: flex;
  align-items: center;
  gap: 32px;
  /* Trailing gap after the last logo, so copy two starts one gap later and
     the -50% loop point lines up exactly. */
  padding: 0 32px 0 0;
  margin: 0;
  list-style: none;
}

.logo-marquee-item {
  flex: 0 0 auto;
}

.logo-marquee-item img {
  display: block;
  max-height: 28px;
  width: auto;
  height: auto;
  @media (max-width: 767px) {
    max-height: 24px;
  }
}

@keyframes logo-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track {
    animation: none;
  }

  .logo-marquee-list[aria-hidden="true"] {
    display: none;
  }
}