/* ==========================================================================
   Animations CSS - Accredible / British Council
   Keyframes and utility classes for menus, dialogs, tooltips, and spinners
   ========================================================================== */

/* CDK Menu Dropdown Animations (Scale and fade in, fade out) */
@keyframes cdkMenuEnter {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cdkMenuExit {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.cdk-menu-animating-enter {
  animation: cdkMenuEnter 120ms cubic-bezier(0, 0, 0.2, 1) forwards !important;
}

.cdk-menu-animating-exit {
  animation: cdkMenuExit 100ms linear forwards !important;
}

/* Modal Dialog Animations (Help, Verify) */
@keyframes dialogEnter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes dialogExit {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

.dialog-animating-enter {
  animation: dialogEnter 150ms cubic-bezier(0, 0, 0.2, 1) forwards !important;
}

.dialog-animating-exit {
  animation: dialogExit 100ms linear forwards !important;
}

/* Backdrop Fade Animations */
@keyframes backdropEnter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes backdropExit {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.backdrop-animating-enter {
  animation: backdropEnter 150ms cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
}

.backdrop-animating-exit {
  animation: backdropExit 100ms linear forwards !important;
}

/* Tooltip Animations */
@keyframes tooltipEnter {
  0% {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
}

@keyframes tooltipExit {
  0% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100%) scale(1);
  }
}

.tooltip-animating-enter {
  animation: tooltipEnter 150ms cubic-bezier(0, 0, 0.2, 1) forwards !important;
}

.tooltip-animating-exit {
  animation: tooltipExit 75ms linear forwards !important;
}

/* Spinner Animation for Verification Modal */
@keyframes acr-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.acr-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid transparent;
  border-top-color: #23085a;
  border-right-color: #23085a;
  border-radius: 50%;
  animation: acr-spin 0.75s linear infinite;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  box-sizing: border-box;
}