/*
 * Reusable loading indicator.
 *
 * Usage: place a full-screen overlay anywhere and toggle `.is-active` to show it.
 *   <div id="app-loader" class="app-loader-overlay"><span class="loader"></span></div>
 *   document.getElementById('app-loader').classList.add('is-active');
 *
 * Linked standalone (not part of the Tailwind build) so it works on every page,
 * including the standalone auth pages.
 */

.loader {
  position: relative;
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: #fff;
}

.loader:before,
.loader:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1s spin linear infinite;
}

.loader:after {
  color: #ff3d00;
  transform: rotateY(70deg);
  animation-delay: 0.4s;
}

@keyframes spin {
  0%,
  100% { box-shadow: 0.2em 0 0 0 currentcolor; }
  12%  { box-shadow: 0.2em 0.2em 0 0 currentcolor; }
  25%  { box-shadow: 0 0.2em 0 0 currentcolor; }
  37%  { box-shadow: -0.2em 0.2em 0 0 currentcolor; }
  50%  { box-shadow: -0.2em 0 0 0 currentcolor; }
  62%  { box-shadow: -0.2em -0.2em 0 0 currentcolor; }
  75%  { box-shadow: 0 -0.2em 0 0 currentcolor; }
  87%  { box-shadow: 0.2em -0.2em 0 0 currentcolor; }
}

/* Full-screen dimmed overlay that centers the loader. Hidden until `.is-active`. */
.app-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.app-loader-overlay.is-active {
  display: flex;
}