/* ====================== */
/* ======= Variables ======= */
/* ====================== */

:root {
  --transform-distance: 40px;
}

/* ======================== */
/* ======= Animations ======= */
/* ======================== */

.brx-animated.brx-animate-slideInRight {
  animation-name: ja-slideInRight;
}

@keyframes ja-slideInRight {
  0% {
    opacity: 0;
    transform: translateX(var(--transform-distance));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

.brx-animated.brx-animate-slideInLeft {
  animation-name: ja-slideInLeft;
}

@keyframes ja-slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(calc(-1 * var(--transform-distance)));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

.brx-animated.brx-animate-slideInUp {
  animation-name: ja-slideInUp;
}

@keyframes ja-slideInUp {
  0% {
    opacity: 0;
    transform: translateY(var(--transform-distance));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

.brx-animated.brx-animate-slideInDown {
  animation-name: ja-slideInDown;
}

@keyframes ja-slideInDown {
  0% {
    opacity: 0;
    transform: translateY(calc(-1 * var(--transform-distance)));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}