@media screen {
  .esl-animate-fade {
    opacity: 0;

    &.in {
      opacity: 1;
      transition: opacity 1.5s;
    }
  }

  .esl-animate-slide {
    --esl-animation-offset-x: 0;
    --esl-animation-offset-y: 0;

    opacity: 0;
    transform: translate3d(
      var(--esl-animation-offset-x),
      var(--esl-animation-offset-y),
      0
    );

    &.in {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition:
        transform 1s,
        opacity 1s;
    }

    &:not(.in) {
      position: relative;
      top: calc(~'-1 * var(--esl-animation-offset-y)');
      left: calc(~'-1 * var(--esl-animation-offset-x)');
    }

    &.up {
      --esl-animation-offset-y: 30px;
    }

    &.down {
      --esl-animation-offset-y: -30px;
    }

    &.left {
      --esl-animation-offset-x: 30px;
    }

    &.right {
      --esl-animation-offset-x: -30px;
    }
  }
}