.loading {
  @apply flex items-center justify-center w-full h-full;
  opacity: 0;
}

.loading__title {
  @apply antialiased font-semibold text-lg;
}

.loading__subtitle {
  @apply antialiased text-sm;
}

/** Static **/
.loading--static {
  @apply rounded bg-grey-light;
}

.loading--static .loading__title {
  @apply text-grey-dark p-10;
}

/** Aircam **/
.loading--aircam {
  @apply flex-col;
}

.loading__aircam {
  @apply text-blue;
}

/** Spinner **/
.loading--spinner {
  @apply flex-col;
}

.loading__spinner {
  @apply rounded-full border-grey-light border-r-blue border-solid border-3;

  width: 50px;
  height: 50px;
}

/** TODO: Move to utility **/
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.loading--spinner .loading__title {
  @apply mt-8;
}

.loading--spinner .loading__subtitle {
  @apply text-grey mt-4 text-center;
  max-width: 260px;
}

/** Transition animations **/

/** Account for animation delay **/
.loading-exit .loading__title,
.loading-enter .loading__title {
  transform: translateY(50%);
}

@keyframes loadingIn {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }

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

@keyframes loadingOut {
  0% {
    opacity: 1;
    transform: translateY(0%);
  }

  100% {
    opacity: 0;
    transform: translateY(50%);
  }
}

.loading-enter,
.loading-enter-done,
.loading-exit {
  opacity: 1;
}

.loading__spinner,
.loading-enter .loading__spinner {
  animation-name: reveal, spin;
  animation-duration: 300ms, 1000ms;
  animation-timing-function: cubic-bezier(.25, .1, .25, 1), linear;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
}

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

.loading-exit .loading__spinner {
  animation-name: hide, spin;
  animation-duration: 150ms, 1000ms;
  animation-timing-function: cubic-bezier(.25, .1, .25, 1), linear;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
}

.loading-exit .loading__title {
  animation-name: loadingOut;
  animation-duration: 150ms;
  animation-timing-function: cubic-bezier(.25, .1, .25, 1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}