@import './var.less';

.@{modal-prefix-cls} {
  // slideUp
  &-animation-slideUp {
    opacity: 0;
    transform: translate3d(0, 100vh, 0);
  }

  &-animation-slideUp-enter {
    animation: slideUpEnter @animation-enter;
  }

  @keyframes slideUpEnter {
    from {
      opacity: 0;
      transform: translate3d(0, 100vh, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  &-animation-slideUp-leave {
    animation: slideUpLeave @animation-leave;
  }

  @keyframes slideUpLeave {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 100vh, 0);
    }
  }

  // center slideUp
  &-animation-center-slideUp {
    opacity: 0;
    transform: translate3d(-50%, 100vh, 0);
  }

  &-animation-center-slideUp-enter {
    animation: centerSlideUpEnter @animation-enter;
  }

  @keyframes centerSlideUpEnter {
    from {
      opacity: 0;
      transform: translate3d(-50%, 100vh, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(-50%, -50%, 0);
    }
  }

  &-animation-center-slideUp-leave {
    animation: centerSlideUpLeave @animation-leave;
  }

  @keyframes centerSlideUpLeave {
    from {
      opacity: 1;
      transform: translate3d(-50%, -50%, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(-50%, 100vh, 0);
    }
  }

  // fadeIn
  &-animation-fadeIn {
    opacity: 0;
  }

  &-animation-fadeIn-enter {
    animation: fadeInEnter @animation-enter;
  }

  @keyframes fadeInEnter {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  &-animation-fadeIn-leave {
    animation: fadeInLeave @animation-leave;
  }

  @keyframes fadeInLeave {
    from {
      opacity: 1;
    }

    to {
      opacity: 1;
    }
  }

  // center fadeIn
  &-animation-center-fadeIn {
    opacity: 0;
  }

  &-animation-center-fadeIn-enter {
    animation: centerFadeInEnter @animation-enter;
  }

  @keyframes centerFadeInEnter {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  &-animation-center-fadeIn-leave {
    animation: centerFadeInLeave @animation-leave;
  }

  @keyframes centerFadeInLeave {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  // scaleIn
  &-animation-scaleIn {
    opacity: 0;
    transform: scale(0);
  }

  &-animation-scaleIn-enter {
    animation: scaleInEnter @animation-enter;
  }

  @keyframes scaleInEnter {
    from {
      opacity: 0;
      transform: scale(0);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  &-animation-scaleIn-leave {
    animation: scaleInLeave @animation-leave;
  }

  @keyframes scaleInLeave {
    from {
      opacity: 1;
      transform: scale(0);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  // center scaleIn
  &-animation-center-scaleIn {
    opacity: 0;
    transform: scale(0) translate(-50%, -50%);
    transform-origin: top left;
  }

  &-animation-center-scaleIn-enter {
    animation: centerScaleInEnter @animation-enter;
  }

  @keyframes centerScaleInEnter {
    from {
      opacity: 1;
      transform: scale(0) translate(-50%, -50%);
    }

    to {
      opacity: 1;
      transform: scale(1) translate(-50%, -50%);
    }
  }

  &-animation-center-scaleIn-leave {
    animation: centerScaleInLeave @animation-leave;
  }

  @keyframes centerScaleInLeave {
    from {
      opacity: 1;
      transform: scale(1) translate(-50%, -50%);
    }

    to {
      opacity: 0;
      transform: scale(0) translate(-50%, -50%);
    }
  }
}