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

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

    &-prepare {
      transform: none;
    }
  }
  .#{$className}-leave {
    animation-timing-function: var(--ease-in-out-circ);
  }
}

@include zoom(zoom, wxadZoom);

// Tooltip
@include zoom(zoom-big-fast, wxadZoomBig, var(--motion-duration-fast));

@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);
  }
}