/*! rtl:begin:ignore */
.zoom-motion(@className, @keyframeName, @duration: calc(@transition-duration - 0.1s)) {
  .@{className} {
    &-active {
      animation-name: ~'@{keyframeName}In';
      animation-duration: @duration;
      animation-timing-function: @ease-out;
    }
    &.hidden {
      animation-name: ~'@{keyframeName}Out';
      animation-duration: .1s;
      animation-timing-function: @ease-in;
    }
  }
}

.zoom-motion(top, kdZoomBottom);
.zoom-motion(left, kdZoomRight);
.zoom-motion(right, kdZoomLeft);
.zoom-motion(bottom, kdZoomTop);

.zoom-motion(topLeft, kdZoomLeftBottom);
.zoom-motion(rightBottom, kdZoomLeftBottom);

.zoom-motion(topRight, kdZoomRightBottom);
.zoom-motion(leftBottom, kdZoomRightBottom);

.zoom-motion(leftTop, kdZoomTopRight);
.zoom-motion(bottomRight, kdZoomTopRight);

.zoom-motion(rightTop, kdZoomTopLeft);
.zoom-motion(bottomLeft, kdZoomTopLeft);

@keyframes kdZoomBottomIn {
  0% {
    opacity: 0;
  }
  5% {
    transform: scale(0.6);
    transform-origin: 50% 100%;
  }
  100% {
    transform: scale(1);
    transform-origin: 50% 100%;
    opacity: 1;
  }
}
@keyframes kdZoomBottomOut {
  0% {
    transform: scale(1);
    transform-origin: 50% 100%;
    opacity: 1;
  }
  100% {
    transform: scale(0.6);
    transform-origin: 50% 100%;
    opacity: 0;
  }
}

@keyframes kdZoomRightIn {
  0% {
    opacity: 0;
  }
  5% {
    transform: scale(0.6);
    transform-origin: 100% 50%;
  }
  100% {
    transform: scale(1);
    transform-origin: 100% 50%;
    opacity: 1;
  }
}
@keyframes kdZoomRightOut {
  0% {
    transform: scale(1);
    transform-origin: 100% 50%;
    opacity: 1;
  }
  100% {
    transform: scale(0.6);
    transform-origin: 100% 50%;
    opacity: 0;
  }
}

@keyframes kdZoomTopIn {
  0% {
    opacity: 0;
  }
  5% {
    transform: scale(0.6);
    transform-origin: 50% 0%;
  }
  100% {
    transform: scale(1);
    transform-origin: 50% 0%;
    opacity: 1;
  }
}
@keyframes kdZoomTopOut {
  0% {
    transform: scale(1);
    transform-origin: 50% 0%;
    opacity: 1;
  }
  100% {
    transform: scale(0.6);
    transform-origin: 50% 0%;
    opacity: 0;
  }
}

@keyframes kdZoomLeftIn {
  0% {
    opacity: 0;
  }
  5% {
    transform: scale(0.6);
    transform-origin: 0% 50%;
  }
  100% {
    transform: scale(1);
    transform-origin: 0% 50%;
    opacity: 1;
  }
}
@keyframes kdZoomLeftOut {
  0% {
    transform: scale(1);
    transform-origin: 0% 50%;
    opacity: 1;
  }
  100% {
    transform: scale(0.6);
    transform-origin: 0% 50%;
    opacity: 0;
  }
}

@keyframes kdZoomLeftBottomIn {
  0% {
    opacity: 0;
  }
  5% {
    transform: scale(0.6);
    transform-origin: 0% 100%;
  }
  100% {
    transform: scale(1);
    transform-origin: 0% 100%;
    opacity: 1;
  }
}
@keyframes kdZoomLeftBottomOut {
  0% {
    transform: scale(1);
    transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    transform: scale(0.6);
    transform-origin: 0% 100%;
    opacity: 0;
  }
}

@keyframes kdZoomRightBottomIn {
  0% {
    opacity: 0;
  }
  5% {
    transform: scale(0.6);
    transform-origin: 100% 100%;
  }
  100% {
    transform: scale(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}
@keyframes kdZoomRightBottomOut {
  0% {
    transform: scale(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    transform: scale(0.6);
    transform-origin: 100% 100%;
    opacity: 0;
  }
}

@keyframes kdZoomTopRightIn {
  0% {
    opacity: 0;
  }
  5% {
    transform: scale(0.6);
    transform-origin: 100% 0%;
  }
  100% {
    transform: scale(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
}
@keyframes kdZoomTopRightOut {
  0% {
    transform: scale(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    transform: scale(0.6);
    transform-origin: 100% 0%;
    opacity: 0;
  }
}

@keyframes kdZoomTopLeftIn {
  0% {
    opacity: 0;
  }
  5% {
    transform: scale(0.6);
    transform-origin: 0% 0%;
  }
  100% {
    transform: scale(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes kdZoomTopLeftOut {
  0% {
    transform: scale(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scale(0.6);
    transform-origin: 0% 0%;
    opacity: 0;
  }
}
/*! rtl:end:ignore */