@use "../mixins/motion" as *;

@mixin zoom(
  $className,
  $keyframeName,
  $duration: var(--adui-motion-duration-base),
  $ease: var(--adui-motion-ease-base)
) {
  @include make-motion($className, $keyframeName, $duration);
  .#{$className}-enter,
  .#{$className}-appear {
    transform: scale(0);
    animation-timing-function: $ease;

    &-prepare {
      transform: none;
    }
  }
  .#{$className}-leave {
    animation-timing-function: $ease;
  }
}

@include zoom(zoom, wxadZoom);

@include zoom(
  zoom-big-bounce,
  wxadZoomBig,
  var(--adui-motion-duration-bounce),
  var(--adui-motion-ease-bounce)
);

@include zoom(
  zoom-big,
  wxadZoomBig,
  var(--adui-motion-duration-base),
  var(--adui-motion-ease-base)
);

@keyframes wxadZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wxadZoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

@keyframes wxadZoomBigIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wxadZoomBigOut {
  0% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}