.esl-carousel-css-renderer.esl-carousel-css-fade {
  &[animating] [esl-carousel-slide] {
    transition: opacity var(--esl-carousel-step-duration) linear;
  }

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

  &[animating] [esl-carousel-slide][pre-active] {
    z-index: 2;
    opacity: 1;
  }

  &[shifted] [esl-carousel-slide][pre-active] {
    z-index: 2;
    opacity: var(--esl-carousel-offset-ratio, 0);
  }
}