.esl-carousel-css-renderer.esl-carousel-css-slide {
  [esl-carousel-slides] {
    transform: translate3d(var(--esl-carousel-offset, 0), 0, 0);

    &.forward {
      transform: translate3d(-100%, 0, 0);
    }
    &.backward {
      transform: translate3d(100%, 0, 0);
    }
  }

  &[animating] [esl-carousel-slide],
  &[animating] [esl-carousel-slides] {
    transition: transform var(--esl-carousel-step-duration) linear;
  }

  [esl-carousel-slide][pre-active][next] {
    left: 100%;
  }

  [esl-carousel-slide][active] {
    left: 0;
  }

  [esl-carousel-slide][pre-active][prev] {
    left: -100%;
  }
}