@use '../params/index.scss' as *;

.x-move-top-start-enter,
.x-move-top-enter,
.x-move-top-end-enter,
.x-move-center-enter {
  animation: x-move-top-enter $x-animation-duration-base ease-in;
}

.x-move-top-start-leave,
.x-move-top-leave,
.x-move-top-end-leave,
.x-move-center-leave {
  animation: x-move-top-leave $x-animation-duration-base ease-out;
}

@keyframes x-move-top-enter {
  from {
    transform: translateY(-2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes x-move-top-leave {
  from {
    transform: translateY(0%);
    opacity: 1;
  }
  to {
    transform: translateY(-2rem);
    opacity: 0;
  }
}

.x-move-left-enter {
  animation: x-move-left-enter $x-animation-duration-base ease-in;
}
.x-move-left-leave {
  animation: x-move-left-leave $x-animation-duration-base ease-out;
}

@keyframes x-move-left-enter {
  from {
    transform: translateX(-2rem);
    opacity: 0;
  }
  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes x-move-left-leave {
  from {
    transform: translateX(0%);
    opacity: 1;
  }
  to {
    transform: translateX(-2rem);
    opacity: 0;
  }
}

.x-move-right-enter {
  animation: x-move-right-enter $x-animation-duration-base ease-in;
}
.x-move-right-leave {
  animation: x-move-right-leave $x-animation-duration-base ease-out;
}

@keyframes x-move-right-enter {
  from {
    transform: translateX(2rem);
    opacity: 0;
  }
  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes x-move-right-leave {
  from {
    transform: translateX(0%);
    opacity: 1;
  }
  to {
    transform: translateX(2rem);
    opacity: 0;
  }
}

.x-move-bottom-start-enter,
.x-move-bottom-enter,
.x-move-bottom-end-enter {
  animation: x-move-bottom-enter $x-animation-duration-base ease-in;
}

.x-move-bottom-start-leave,
.x-move-bottom-leave,
.x-move-bottom-end-leave {
  animation: x-move-bottom-leave $x-animation-duration-base ease-out;
}

@keyframes x-move-bottom-enter {
  from {
    transform: translateY(2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes x-move-bottom-leave {
  from {
    transform: translateY(0%);
    opacity: 1;
  }
  to {
    transform: translateY(2rem);
    opacity: 0;
  }
}