$overlayPrefix: amos-overlay;
$animatePrefix: $overlayPrefix;

@mixin overlay-mask-animate($animateName: $overlayPrefix) {
  .#{$animateName}-enter .#{$overlayPrefix}-mask {
    opacity: 0.01;
  }

  .#{$animateName}-enter-active .#{$overlayPrefix}-mask {
    opacity: 1;
    transition: opacity 300ms ease-in;
  }

  .#{$animateName}-exit .#{$overlayPrefix}-mask {
    opacity: 1;
  }

  .#{$animateName}-exit-active .#{$overlayPrefix}-mask {
    opacity: 0;
    transition: opacity 300ms ease-in;
  }
}

@mixin overlay-content-animate($animateName: $overlayPrefix) {
  .#{$animateName}-enter .#{$overlayPrefix}-content {
    opacity: 0;
    transform: scale(0.5);
  }

  .#{$animateName}-enter-active .#{$overlayPrefix}-content {
    opacity: 1;
    transform: translate(0);
    transition: transform 300ms ease, opacity 300ms ease;
  }

  .#{$animateName}-exit .#{$overlayPrefix}-content {
    opacity: 1;
    transform: translate(0);
    transition: transform 300ms ease, opacity 300ms ease;
  }

  .#{$animateName}-exit-active .#{$overlayPrefix}-content {
    opacity: 0;
    transform: scale(0.5);
  }
}

@mixin overlay-animate($animateName: $overlayPrefix) {
  @include overlay-mask-animate($animateName);
  @include overlay-content-animate($animateName);

  .#{$animateName}-enter,
  .#{$animateName}-enter-done,
  .#{$animateName}-exit {
    display: inherit;
  }
}

// content keyframes
@mixin overlay-content-animatekf($animateName, $keyframeName) {
  .#{$animateName}-enter-active .#{$overlayPrefix}-content {
    animation-duration: 1s;
    animation-name: #{$keyframeName}In;
    animation-fill-mode: both;
  }

  .#{$animateName}-exit-active .#{$overlayPrefix}-content {
    animation-duration: 1s;
    animation-name: #{$keyframeName}Out;
    animation-fill-mode: both;
  }
}

@mixin overlay-animate-kf($animateName, $keyframeName) {
  @include overlay-mask-animate($animateName);
  @include overlay-content-animatekf($animateName, $keyframeName);

  .#{$animateName}-enter,
  .#{$animateName}-enter-done,
  .#{$animateName}-exit {
    display: inherit;
  }
}