:where(.no-js) .fs-block-marquee__viewport {
  overflow-x: auto;
}

:where(.fs-block-marquee) {
  --fs-slide-gap: 0px; /* Must have unit to be used in calc() */
  --fs-columns: 3; /* Default number of columns */
  --fs-fade-width: var(--fs-blocks-spacing-xl); /* Default fade width */
  --fs-marquee-duration: 50s; /* Animation duration for loop type */
  --fs-scroll-range: 3000%; /* Scroll range for scroll type - default is speed 2 */
  --column-width: calc((100cqw - (var(--fs-slide-gap) * (var(--fs-columns, 3) - 1))) / var(--fs-columns, 3));
}

.fs-block-marquee {
  position: relative;

  &.has-fade {
    --_o: var(--fs-fade-opacity, 0);
    --_r: calc(1 - var(--_o));

    .fs-block-marquee__viewport {
      mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, var(--_o)),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.02)) calc(var(--fs-fade-width) * 0.1),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.07)) calc(var(--fs-fade-width) * 0.2),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.15)) calc(var(--fs-fade-width) * 0.3),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.27)) calc(var(--fs-fade-width) * 0.4),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.42)) calc(var(--fs-fade-width) * 0.5),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.58)) calc(var(--fs-fade-width) * 0.6),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.73)) calc(var(--fs-fade-width) * 0.7),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.86)) calc(var(--fs-fade-width) * 0.8),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.95)) calc(var(--fs-fade-width) * 0.9),
        #000 var(--fs-fade-width),
        #000 calc(100% - var(--fs-fade-width)),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.95)) calc(100% - var(--fs-fade-width) * 0.9),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.86)) calc(100% - var(--fs-fade-width) * 0.8),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.73)) calc(100% - var(--fs-fade-width) * 0.7),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.58)) calc(100% - var(--fs-fade-width) * 0.6),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.42)) calc(100% - var(--fs-fade-width) * 0.5),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.27)) calc(100% - var(--fs-fade-width) * 0.4),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.15)) calc(100% - var(--fs-fade-width) * 0.3),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.07)) calc(100% - var(--fs-fade-width) * 0.2),
        rgba(0, 0, 0, calc(var(--_o) + var(--_r) * 0.02)) calc(100% - var(--fs-fade-width) * 0.1),
        rgba(0, 0, 0, var(--_o))
      );
    }
  }

  /* Pause animation on hover if enabled */
  &.has-pause-on-hover:hover {

    .fs-block-marquee__container {
      animation-play-state: paused;
    }
  }
}

.fs-block-marquee__viewport {
  display: flex;
  position: relative;
  overflow: clip;
  container-type: inline-size;
}

.fs-block-marquee__container {
  display: flex;
  align-items: flex-start;
  will-change: transform;

  /* Loop animations - infinite auto-scroll */
  .fs-block-marquee.is-type-loop.is-direction-left & {
    animation: fsMarqueeLeft var(--fs-marquee-duration) linear infinite;
  }

  .fs-block-marquee.is-type-loop.is-direction-right & {
    animation: fsMarqueeRight var(--fs-marquee-duration) linear infinite;
  }

  /* Scroll-driven animations - based on page scroll */
  .fs-block-marquee.is-type-scroll.is-direction-left & {
    animation: fsMarqueeLeft linear;
    animation-timeline: scroll(root);
    animation-range: 0% var(--fs-scroll-range);
  }

  .fs-block-marquee.is-type-scroll.is-direction-right & {
    animation: fsMarqueeRight linear;
    animation-timeline: scroll(root);
    animation-range: 0% var(--fs-scroll-range);
  }

  /* Using `&:is(&)` to higher the specificity of the selector */
  &:is(&) > *, > .components-disabled > * {
    position: relative;
    flex-shrink: 0;
    margin: 0;
    min-width: 0;
    box-sizing: border-box;

    /* Use margin for gap - it's included in the total width calculation for -50% to work */
    margin-inline-end: var(--fs-slide-gap);

    /* All items use column-based width, regardless of align settings */
    width: var(--column-width);
    max-width: var(--column-width);
  }
}

/* Keyframe animations */
@keyframes fsMarqueeLeft {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }
}

@keyframes fsMarqueeRight {

  0% { transform: translateX(-50%); }

  100% { transform: translateX(0%); }
}