@import "../../animate/scss/mixin.scss";
@import "../../animate/scss/variable.scss";

@mixin dialogOutKeyframes(
  $animation-name,
  $x,
  $y,
) {
  @include keyframes($animation-name) {
    0% {
      transform: scale(1) translate(0, 0);
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: scale(0.8) translate($x, $y);
    }
  }
}

@mixin dialogInKeyframes(
  $animation-name,
  $x,
  $y,
) {
  @include keyframes($animation-name) {
    0% {
      transform: scale(0.8) translate($x, $y);
      opacity: 0;
    }

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

@mixin dialogZoom(
  $animationName,
  $count: $countDefault,
  $duration: $durationDefault,
  $delay: $delayDefault,
  $function: $ease-in-out-quint,
  $fill: $fillDefault,
  $visibility: $visibilityDefault
) {
  @include animation-name($animationName);
  @include count($count);
  @include duration($duration);
  @include delay($delay);
  @include function($function);
  @include fill-mode($fill);
  @include visibility($visibility);
}

@include dialogInKeyframes(dialogZoomInLeftTop, -60px, -60px);
@mixin dialogZoomInLeftTop {
  @include dialogZoom(dialogZoomInLeftTop);
}

@include dialogOutKeyframes(dialogZoomOutLeftTop, -60px, -60px);
@mixin dialogZoomOutLeftTop {
  @include dialogZoom(dialogZoomOutLeftTop);
}

@include dialogInKeyframes(dialogZoomInTop, 0, -60px);
@mixin dialogZoomInTop {
  @include dialogZoom(dialogZoomInTop);
}

@include dialogOutKeyframes(dialogZoomOutTop, 0, -60px);
@mixin dialogZoomOutTop {
  @include dialogZoom(dialogZoomOutTop);
}

@include dialogInKeyframes(dialogZoomInRightTop, 60px, -60px);
@mixin dialogZoomInRightTop {
  @include dialogZoom(dialogZoomInRightTop);
}

@include dialogOutKeyframes(dialogZoomOutRightTop, 60px, -60px);
@mixin dialogZoomOutRightTop {
  @include dialogZoom(dialogZoomOutRightTop);
}

@include dialogInKeyframes(dialogZoomInLeftBottom, -60px, 80px);
@mixin dialogZoomInLeftBottom {
  @include dialogZoom(dialogZoomInLeftBottom);
}

@include dialogOutKeyframes(dialogZoomOutLeftBottom, -60px, 80px);
@mixin dialogZoomOutLeftBottom {
  @include dialogZoom(dialogZoomOutLeftBottom);
}

@include dialogInKeyframes(dialogZoomInBottom, 0, 80px);
@mixin dialogZoomInBottom {
  @include dialogZoom(dialogZoomInBottom);
}

@include dialogOutKeyframes(dialogZoomOutBottom, 0, 80px);
@mixin dialogZoomOutBottom {
  @include dialogZoom(dialogZoomOutBottom);
}

@include dialogInKeyframes(dialogZoomInRightBottom, 60px, 80px);
@mixin dialogZoomInRightBottom {
  @include dialogZoom(dialogZoomInRightBottom);
}

@include dialogOutKeyframes(dialogZoomOutRightBottom, 60px, 80px);
@mixin dialogZoomOutRightBottom {
  @include dialogZoom(dialogZoomOutRightBottom);
}