/* Glyph InlineLoader from generative-loaders (MIT)
   https://github.com/kasturibuilds/generative-loaders */

.il-loader,
.il-loader * {
  box-sizing: border-box;
}

.il-loader {
  --il-color: currentColor;
  --il-size: 1.15em;
  --il-duration: 1.2s;
  width: var(--il-size);
  height: var(--il-size);
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--il-color);
  line-height: 1;
  vertical-align: -0.16em;
}

.il-glyph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  grid-template-columns: repeat(3, 1fr);
  gap: 8%;
  padding: 8%;
}

.il-glyph i {
  width: 76%;
  aspect-ratio: 1;
  border: max(1px, calc(var(--il-size) * 0.055)) solid currentColor;
  animation: il-glyph var(--il-duration) cubic-bezier(0.45, 0, 0.2, 1) infinite;
  animation-delay: var(--il-delay);
}

@keyframes il-glyph {
  0%,
  100% {
    border-radius: 50%;
    transform: scale(0.38) rotate(0deg);
    opacity: 0.28;
    background: transparent;
  }
  35% {
    border-radius: 20%;
    transform: scale(1) rotate(45deg);
    opacity: 1;
    background: currentColor;
  }
  68% {
    border-radius: 50% 8% 50% 8%;
    transform: scale(0.72) rotate(90deg);
    opacity: 0.62;
    background: transparent;
  }
}

.il-loader[data-paused="true"] *,
.il-loader[data-paused="true"] *::before,
.il-loader[data-paused="true"] *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .il-loader *,
  .il-loader *::before,
  .il-loader *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}