/*
 * Confirmation dialog overlay and box.
 * Used by shared/confirmation_dialog partial.
 */

.confirmation-dialog-overlay {
  opacity: 0;
  transition: opacity 0.2s;
}

.confirmation-dialog-overlay.confirmation-dialog-show {
  opacity: 1;
}

.confirmation-dialog-box {
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
}

.confirmation-dialog-box.confirmation-dialog-show {
  transform: scale(1);
  opacity: 1;
}

@keyframes confirmation-bounce-once {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.confirmation-dialog-animate-bounce {
  animation: confirmation-bounce-once 0.5s ease-out forwards;
}

@keyframes confirmation-draw-check {
  0% {
    stroke-dashoffset: 24;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.confirmation-dialog-icon-success svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: confirmation-draw-check 0.4s ease-out 0.2s forwards;
}