.logo-ticker {
  --logo-ticker-gap: var(--s2a-spacing-80);
  --logo-ticker-logo-height: 36px;
  --logo-ticker-dir: 1;
  --logo-ticker-duration: 30s;
  --logo-ticker-inset: var(--s2a-spacing-24);
  --logo-ticker-btn-size: 2rem;
  --logo-ticker-mask-width: calc(var(--logo-ticker-inset) * 2 + var(--logo-ticker-btn-size));

  position: relative;
  width: 100%;
  contain: layout paint;
  padding-block: var(--logo-ticker-inset);

  .logo-ticker-wrap {
    width: 100%;
    overflow: hidden;
  }

  .logo-ticker-wrap:not(:has(.is-static)) {
    mask-image: linear-gradient(
      to right,
      black 0,
      black calc(100% - var(--logo-ticker-mask-width) - var(--logo-ticker-inset)),
      transparent calc(100% - var(--logo-ticker-mask-width))
    );
  }

  .logo-ticker-track {
    display: flex;
    gap: var(--logo-ticker-gap);
    width: max-content;
  }

  .logo-ticker-set {
    display: flex;
    gap: var(--logo-ticker-gap);
    flex: 0 0 auto;

    &:not(:first-child) {
      display: none;
    }
  }

  &.dark svg *,
  .dark & svg * {
    fill: var(--s2a-color-gray-25);
  }

  span.icon,
  .logo-ticker-track svg,
  picture img {
    height: var(--logo-ticker-logo-height);
    width: auto;
    flex: 0 0 auto;
  }

  .logo-ticker-track:not(.is-static) {
    animation: logo-ticker-scroll var(--logo-ticker-duration) linear infinite;
    animation-play-state: var(--logo-ticker-play-state, running);

    .logo-ticker-set:not(:first-child) {
      display: flex;
    }
  }

  .logo-ticker-track.is-static {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    padding-inline: var(--logo-ticker-gap);
  }

  .logo-ticker-play-pause {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    inset-inline-end: var(--logo-ticker-inset);
    width: var(--logo-ticker-btn-size);
    height: var(--logo-ticker-btn-size);
    border-radius: var(--s2a-border-radius-2xs);
    border: var(--s2a-border-width-sm) solid var(--s2a-color-transparent-black-08);
    background: var(--s2a-color-transparent-black-04);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;

    &:hover {
      border-color: var(--s2a-color-transparent-black-16);
      background: var(--s2a-color-transparent-black-08);
      transform: scale(1.05);
    }

    &:active { transform: scale(0.98); }

    .logo-ticker-play-icon,
    .logo-ticker-pause-icon {
      display: block;
      width: 1.125rem;
      height: 1.125rem;
    }

    &.is-playing .logo-ticker-play-icon,
    &:not(.is-playing) .logo-ticker-pause-icon {
      display: none;
    }

    &:focus-visible {
      outline: 2px solid var(--s2a-color-focus-ring-default);
      outline-offset: 2px;
    }
  }

  &.dark .logo-ticker-play-pause,
  .dark & .logo-ticker-play-pause {
    border-radius: var(--s2a-border-radius-6);
    border-color: var(--s2a-color-transparent-white-24);
    background: var(--s2a-color-transparent-black-64);
    color: var(--s2a-color-gray-25);

    &:hover {
      background: var(--s2a-color-transparent-black-80);
    }
  }

  .logo-ticker-wrap:has(.is-static) ~ .logo-ticker-play-pause {
    display: none;
  }
}

:dir(rtl) .logo-ticker {
  --logo-ticker-dir: -1;

  .logo-ticker-wrap:not(:has(.is-static)) {
    mask-image: linear-gradient(
      to left,
      black 0,
      black calc(100% - var(--logo-ticker-mask-width) - var(--logo-ticker-inset)),
      transparent calc(100% - var(--logo-ticker-mask-width))
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-ticker {
    --logo-ticker-play-state: paused;
  }
}

@keyframes logo-ticker-scroll {
  from {
    translate: calc(var(--logo-ticker-scroll-offset, 0px) * -1 * var(--logo-ticker-dir));
  }

  to {
    translate: calc((var(--logo-ticker-set-width, 0px) + var(--logo-ticker-scroll-offset, 0px)) * -1 * var(--logo-ticker-dir));
  }
}