.loading-indicator-wrapper {
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-indicator {
  @apply text-gray-50 dark:text-gray-800 text-xs uppercase flex flex-col items-center justify-center overflow-visible;
}

.loading-indicator__container {
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
}

.loading-indicator__figure {
  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-transparent dark:bg-transparent border-[#e5e7eb] dark:border-gray-800;
  border: 0 solid;
  border-width: 6px;
}

.no-reduce-motion .loading-indicator__figure {
  animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.loading-indicator-wrapper .loading-indicator {
  @apply h-screen w-screen items-center;

  &__figure {
    @apply border-gray-200 dark:border-gray-800;
  }
}

@keyframes loader-figure {
  0% {
    @apply bg-yellow-200 w-0 h-0;
  }

  29% {
    @apply bg-gray-200;
  }

  30% {
    @apply w-12 h-12 bg-transparent opacity-100;
    border-width: 6px;
  }

  100% {
    @apply w-12 h-12 border-0 opacity-0 bg-transparent;
  }
}