@import 'xtend-library/src/core/animation/_animation.less';

/**
 * vars
 */

// time

@time-micro: 50ms;
@time-mini: 100ms;
@time-tiny: 250ms;
@time-small: 500ms;
@time-medium: 750ms;
@time-large: 1000ms;
@time-big: 2000ms;
@time-giant: 3000ms;
@time-huge: 4000ms;

// ease

@ease-cheetah: ~'cubic-bezier(0.14, 0.63, 0, 1)';
@ease-tiger: ~'cubic-bezier(0.96, 0.1, 0.14, 0.88)';
@ease-cat: ~'cubic-bezier(0.77, 0, 0.17, 1)';
@ease-dog: ~'cubic-bezier(0.36, 0, 0, 1)';
@ease-penguin: ~'cubic-bezier(0.68, 0.13, 0.25, 1)';
@ease-in: @ease-out-quad;
@ease-out: @ease-in-out-quad;

@ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
@ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
@ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);

@ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
@ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
@ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);

@ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
@ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
@ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);

@ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
@ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
@ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);

@ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
@ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
@ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);

@ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
@ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
@ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);

@ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
@ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
@ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);

@ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
@ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
@ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);

/**
 * animation
 */

// anim-y

.anim-y {
  &.in {
    opacity: 1;
    animation-name: anim-y-in;
    animation-duration: @time-small;
    animation-timing-function: @ease-in;
  }
  &.out {
    opacity: 0;
    animation-name: anim-y-out;
    animation-duration: @time-small;
    animation-timing-function: @ease-out;
  }
}

@keyframes anim-y-in {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes anim-y-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

// anim-y-inverse

.anim-y-inverse {
  &.in {
    opacity: 1;
    animation-name: anim-y-inverse-in;
    animation-duration: @time-small;
    animation-timing-function: @ease-in;
  }
  &.out {
    opacity: 0;
    animation-name: anim-y-inverse-out;
    animation-duration: @time-small;
    animation-timing-function: @ease-out;
  }
}

@keyframes anim-y-inverse-in {
  0% {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes anim-y-inverse-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }
}

// anim-x

.anim-x {
  &.in {
    opacity: 1;
    animation-name: anim-x-in;
    animation-duration: @time-small;
    animation-timing-function: @ease-in;
  }
  &.out {
    opacity: 0;
    animation-name: anim-x-out;
    animation-duration: @time-small;
    animation-timing-function: @ease-out;
  }
}

@keyframes anim-x-in {
  0% {
    opacity: 0;
    transform: translateX(-1.5rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes anim-x-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(1.5rem);
  }
}

// anim-x-inverse

.anim-x-inverse {
  &.in {
    opacity: 1;
    animation-name: anim-x-inverse-in;
    animation-duration: @time-small;
    animation-timing-function: @ease-in;
  }
  &.out {
    opacity: 0;
    animation-name: anim-x-inverse-out;
    animation-duration: @time-small;
    animation-timing-function: @ease-out;
  }
}

@keyframes anim-x-inverse-in {
  0% {
    opacity: 0;
    transform: translateX(1.5rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes anim-x-inverse-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-1.5rem);
  }
}

// anim-zoom

.anim-zoom {
  &.in {
    opacity: 1;
    animation-name: anim-zoom-in;
    animation-duration: @time-small;
    animation-timing-function: @ease-in;
  }
  &.out {
    opacity: 0;
    animation-name: anim-zoom-out;
    animation-duration: @time-small;
    animation-timing-function: @ease-out;
  }
}

@keyframes anim-zoom-in {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes anim-zoom-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/**
 * custom
 */

// collapse

.collapse-height {
  &.in {
    transition: height @time-medium @ease-out;
  }
  &.out {
    transition: height @time-medium @ease-out;
  }
}

.collapse-width {
  &.in {
    transition: width @time-medium @ease-out;
  }
  &.out {
    transition: width @time-medium @ease-out;
  }
}

/**
 * prefers-reduced-motion
 */

@media (prefers-reduced-motion: reduce), (update: slow) {
  *, *:before, *:after {
    .duration-none() !important;
  }
}