@use 'variables' as *;

$fast-out-slow-in: var(--w-transition-timing-fast-out-slow-in);

// Fade.
// --------------------------------------------------------
.fade-enter-active {animation: w-fade var(--w-transition-duration);}
.fade-leave-active {animation: w-fade var(--w-transition-duration) reverse;}
@keyframes w-fade {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
// --------------------------------------------------------

// Slide-right: translate x from left to right.
// --------------------------------------------------------
.slide-right-enter-active, .slide-right-leave-active {
  transition: var(--w-transition-duration) $fast-out-slow-in;
  transition-property: transform, left, margin-left;
  transform: translateX(0%);
}
.slide-right-enter-from, .slide-right-leave-to {
  transform: translateX(-100%);
  left: 0 !important;
  margin-left: 0 !important;
}
// --------------------------------------------------------

// Slide-left: translate x from right to left.
// --------------------------------------------------------
.slide-left-enter-active, .slide-left-leave-active {
  transition: var(--w-transition-duration);
  transition-property: transform, right, margin-right;
  transform: translateX(0%);
}
.slide-left-enter-from, .slide-left-leave-to {
  transform: translateX(100%);
  right: 0 !important;
  margin-right: 0 !important;
}
// --------------------------------------------------------

// Slide-down: translate y from top to bottom.
// --------------------------------------------------------
.slide-down-enter-active, .slide-down-leave-active {
  transition: transform var(--w-transition-duration) $fast-out-slow-in;
  transition-property: transform, top, margin-top;
  transform: translateY(0%);
}
.slide-down-enter-from, .slide-down-leave-to {
  transform: translateY(-100%);
  top: 0 !important;
  margin-top: 0 !important;
}
// --------------------------------------------------------

// Slide-up: translate y from bottom to top.
// --------------------------------------------------------
.slide-up-enter-active, .slide-up-leave-active {
  transition: transform var(--w-transition-duration) $fast-out-slow-in;
  transition-property: transform, bottom, margin-bottom;
  transform: translateY(0%);
}
.slide-up-enter-from, .slide-up-leave-to {
  transform: translateY(100%);
  bottom: 0 !important;
  margin-bottom: 0 !important;
}
// --------------------------------------------------------

// Slide-fade-left.
// --------------------------------------------------------
.slide-fade-left-enter-active, .slide-fade-left-leave-active {
  transition: all var(--w-transition-duration) $fast-out-slow-in;
}
.slide-fade-left-enter-from, .slide-fade-left-leave-to {
  transform: translateX(12px);
  opacity: 0;
}

// Slide-fade-right.
// --------------------------------------------------------
.slide-fade-right-enter-active, .slide-fade-right-leave-active {
  transition: all var(--w-transition-duration) $fast-out-slow-in;
}
.slide-fade-right-enter-from, .slide-fade-right-leave-to {
  transform: translateX(-12px);
  opacity: 0;
}
// --------------------------------------------------------

// Slide-fade-up.
// --------------------------------------------------------
.slide-fade-up-enter-active, .slide-fade-up-leave-active {
  transition: all var(--w-transition-duration) $fast-out-slow-in;
}
.slide-fade-up-enter-from, .slide-fade-up-leave-to {
  transform: translateY(12px);
  opacity: 0;
}
// --------------------------------------------------------

// Slide-fade-down.
// --------------------------------------------------------
.slide-fade-down-enter-active, .slide-fade-down-leave-active {
  transition: all var(--w-transition-duration) $fast-out-slow-in;
}
.slide-fade-down-enter-from, .slide-fade-down-leave-to {
  transform: translateY(-12px);
  opacity: 0;
}
// --------------------------------------------------------

// Scale.
// --------------------------------------------------------
.scale-enter-active {animation: w-scale var(--w-transition-duration);}
.scale-leave-active {animation: w-scale var(--w-transition-duration) reverse;}
@keyframes w-scale {
  0% {transform: scale(0);}
  100% {transform: scale(1);}
}
// --------------------------------------------------------

// Scale-fade.
// --------------------------------------------------------
.scale-fade-enter-active {animation: w-scale-fade var(--w-transition-duration);}
.scale-fade-leave-active {animation: w-scale-fade var(--w-transition-duration) reverse;}
@keyframes w-scale-fade {
  0% {transform: scale(0.8);opacity: 0;}
  100% {transform: scale(1);opacity: 1;}
}
// --------------------------------------------------------

// Bounce.
// --------------------------------------------------------
.bounce-enter-active {animation: w-bounce calc(var(--w-transition-duration) + 0.05s);}
.bounce-leave-active {animation: w-bounce calc(var(--w-transition-duration) + 0.05s) reverse;}
@keyframes w-bounce {
  0% {transform: scale(0.7);opacity: 0;}
  60% {transform: scale(1.1);opacity: 1;}
  100% {transform: scale(1);}
}
// --------------------------------------------------------

// Twist.
// --------------------------------------------------------
.twist-enter-active {animation: w-twist calc(var(--w-transition-duration) + 0.25s);}
.twist-leave-active {animation: w-twist calc(var(--w-transition-duration) + 0.25s) reverse;}
@keyframes w-twist {
  0% {transform: scale(0) rotate(-70deg);}
  60% {transform: scale(1.03) rotate(6deg);}
  100% {transform: scale(1) rotate(0deg);}
}
// --------------------------------------------------------