@import './../mixins/makeanim.scss';

$combined-ease-out: cubic-bezier(0.175, 0.885, 0.32, 1);
$combined-duration: 1s;
$zoom-fast-duration: 0.25s;

@mixin zoom-anim($className, $keyframeName, $duration: $animation-duration-base) {
  @include make-anim($className, $keyframeName, $duration);

  .#{$className}-enter,
  .#{$className}-appear {
    transform: scale(0); // need this by yiminghe
    animation-timing-function: $ease-out-circ;
  }

  .#{$className}-leave {
    animation-timing-function: $ease-in-out-circ;
  }
}

// For Modal, Select choosen item
@include zoom-anim(zoom, amosZoom);
// For Popover, Popconfirm, Dropdown
@include zoom-anim(zoom-big, amosZoomBig);
// For Tooltip
@include zoom-anim(zoom-big-fast, amosZoomBig, $animation-duration-fast);
@include zoom-anim(zoom-up, amosZoomUp);
@include zoom-anim(zoom-down, amosZoomDown);
@include zoom-anim(zoom-left, amosZoomLeft);
@include zoom-anim(zoom-right, amosZoomRight);

// sprinback
@include zoom-anim(zoom-spring-back, amosZoomSspringBack);

// shrink
@include zoom-anim(zoom-shrink, amosShrink);

// expand
@include zoom-anim(zoom-expand, amosExpand);

// Combined animate
@include zoom-anim(zoom-comb-down, zoomCombDown, $combined-duration);
@include zoom-anim(zoom-comb-up, zoomCombUp, $combined-duration);
@include zoom-anim(zoom-comb-left, zoomCombLeft, $combined-duration);
@include zoom-anim(zoom-comb-right, zoomCombRight, $combined-duration);

// zoom right bottom
@include zoom-anim(zoom-tl, amosZoomTopLeft, $zoom-fast-duration);
@include zoom-anim(zoom-tr, amosZoomTopRight, $zoom-fast-duration);
@include zoom-anim(zoom-bl, amosZoomBottomLeft, $zoom-fast-duration);
@include zoom-anim(zoom-br, amosZoomBottomRight, $zoom-fast-duration);


@keyframes amosZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes amosZoomOut {
  0% {
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

@keyframes amosZoomBigIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes amosZoomBigOut {
  0% {
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes amosZoomUpIn {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.8);
  }

  100% {
    transform-origin: 50% 0%;
    transform: scale(1);
  }
}

@keyframes amosZoomUpOut {
  0% {
    transform-origin: 50% 0%;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.8);
  }
}

@keyframes amosZoomLeftIn {
  0% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0.8);
  }

  100% {
    transform-origin: 0% 50%;
    transform: scale(1);
  }
}

@keyframes amosZoomLeftOut {
  0% {
    transform-origin: 0% 50%;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0.8);
  }
}

@keyframes amosZoomRightIn {
  0% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0.8);
  }

  100% {
    transform-origin: 100% 50%;
    transform: scale(1);
  }
}

@keyframes amosZoomRightOut {
  0% {
    transform-origin: 100% 50%;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0.8);
  }
}

@keyframes amosZoomDownIn {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0.8);
  }

  100% {
    transform-origin: 50% 100%;
    transform: scale(1);
  }
}

@keyframes amosZoomDownOut {
  0% {
    transform-origin: 50% 100%;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0.8);
  }
}

@keyframes amosZoomSspringBackIn {
  0% {
    transform: scale(0.7);
  }

  45% {
    transform: scale(1.05);
  }

  80% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes amosZoomSspringBackOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes amosShrinkIn {
  0% {
    opacity: 0;
    transform: scale(1.2);
    animation-timing-function: $ease-out-circ;
  }

  70% {
    transform: scale(0.95);
    animation-timing-function: ease;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes amosShrinkOut {
  0% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: $ease-out-circ;
  }

  30% {
    opacity: 1;
    transform: scale(1.03);
    animation-timing-function: ease;
  }

  100% {
    opacity: 0;
    transform: scale(0.85);
    animation-timing-function: ease;
  }
}

@keyframes amosExpandOut {
  0% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: $ease-out-circ;
  }

  30% {
    opacity: 1;
    transform: scale(0.95);
    animation-timing-function: ease;
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes amosExpandIn {
  0% {
    opacity: 0;
    transform: scale(0.85);
    animation-timing-function: $ease-out-circ;
  }

  70% {
    transform: scale(1.03);
    animation-timing-function: ease;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease;
  }
}

// Combined

@keyframes zoomCombDownIn {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: $ease-in;
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: $combined-ease-out;
  }
}

@keyframes zoomCombDownOut {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: $combined-ease-out;
  }

  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: $ease-in;
  }
}

@keyframes zoomCombLeftIn {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    animation-timing-function: $ease-in;
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    animation-timing-function: $combined-ease-out;
  }
}

@keyframes zoomCombLeftOut {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
  }
}

@keyframes zoomCombRightIn {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    animation-timing-function: $ease-in;
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    animation-timing-function: $combined-ease-out;
  }
}

@keyframes zoomCombRightOut {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    transform: scale(0.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
  }
}

@keyframes zoomCombUpIn {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    animation-timing-function: $ease-in;
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: $combined-ease-out;
  }
}

@keyframes zoomCombUpOut {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: $ease-in;
  }

  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: $combined-ease-out;
  }
}

// zoom right-bottom
@keyframes amosZoomTopLeftIn {
  0% {
    transform-origin: top left; // top left = left top = 0 0
    transform: scale(0.01);
  }

  100% {
    visibility: visible;
    transform-origin: top left;
    transform: scale(1);
  }
}

@keyframes amosZoomTopLeftOut {
  0% {
    transform-origin: top left;
    transform: scale(1);
  }

  100% {
    visibility: hidden;
    transform-origin: top left;
    transform: scale(0.01);
  }
}

@keyframes amosZoomTopRightIn {
  0% {
    transform-origin: top right; // right top = top right = 100% 0
    transform: scale(0.01);
  }

  100% {
    visibility: visible;
    transform-origin: top right;
    transform: scale(1);
  }
}

@keyframes amosZoomTopRightOut {
  0% {
    transform-origin: top right;
    transform: scale(1);
  }

  100% {
    visibility: hidden;
    transform-origin: top right;
    transform: scale(0.01);
  }
}

@keyframes amosZoomBottomLeftIn {
  0% {
    transform-origin: bottom left; // bottom left = left bottom = 0 100%
    transform: scale(0.01);
  }

  100% {
    visibility: visible;
    transform-origin: bottom left;
    transform: scale(1);
  }
}

@keyframes amosZoomBottomLeftOut {
  0% {
    transform-origin: bottom left;
    transform: scale(1);
  }

  100% {
    visibility: hidden;
    transform-origin: bottom left;
    transform: scale(0.01);
  }
}

@keyframes amosZoomBottomRightIn {
  0% {
    transform-origin: bottom right; // bottom right = right bottom = 100% 100%
    transform: scale(0.01);
  }

  100% {
    visibility: visible;
    transform-origin: bottom right;
    transform: scale(1);
  }
}

@keyframes amosZoomBottomRightOut {
  0% {
    transform-origin: bottom right;
    transform: scale(1);
  }

  100% {
    visibility: hidden;
    transform-origin: bottom right;
    transform: scale(0.01);
  }
}