.prompt {
  @apply absolute flex flex-col items-center justify-center h-full w-full px-2;
}

.prompt h1,
.prompt-btn {
  @apply w-full text-center h-half;
}

.prompt-btn .btn {
  min-width: 75%;
}

.prompt h1 {
  @apply pt-20 select-none;
}

/** Account for animation delay **/
.prompt-enter .prompt-btn {
  transform: translateX(100%);
}

/** Animations **/

@keyframes in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes out {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }

  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

.prompt-enter h1 {
  animation-name: in;
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(.25, .1, .25, 1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.prompt-exit h1 {
  animation-name: out;
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(.25, .1, .25, 1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.prompt-enter .prompt-btn {
  animation-name: in;
  animation-delay: 100ms;
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(.25, .1, .25, 1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.prompt-exit .prompt-btn {
  animation-name: out;
  animation-delay: 100ms;
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(.25, .1, .25, 1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}