@import "settings.animations";

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

    50% {
      transform: translate(-50%, -50%) scale(1.02);
    }

    80% {
      transform: translate(-50%, -50%) scale(0.95);
    }

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

@mixin modal {
  animation-name: modal;
  animation-duration: $animation-duration;
  animation-fill-mode: both;
  animation-timing-function: $animation-easing;
}

@mixin modal--top {
  transform-origin: center top;
}

@mixin modal--bottom {
  transform-origin: center bottom;
}

@mixin modal--left {
  transform-origin: left center;
}

@mixin modal--right {
  transform-origin: right center;
}

@mixin modal--slow {
  animation-duration: $animation-duration-slow;
}

@mixin modal--fast {
  animation-duration: $animation-duration-fast;
}