:root {
  --hq-loader-bg: rgba(255,255,255,.94);
}

.hq-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hq-loader-bg);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 250ms ease;
}

.hq-loader-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.hq-loader-overlay[hidden] {
  display: none;
}

.hq-loader-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hq-loader {
  width: var(--hq-loader-size, 64px);
  aspect-ratio: 1;
  background: 
    radial-gradient(farthest-side at bottom right,#F10C49 90%,#0000),
    radial-gradient(farthest-side at bottom left ,#F10C49 90%,#0000),
    radial-gradient(farthest-side at top    right,#F10C49 90%,#0000),
    radial-gradient(farthest-side at top    left ,#F10C49 90%,#0000),
    radial-gradient(farthest-side at bottom right,#f4dd51 90%,#0000),
    radial-gradient(farthest-side at bottom left ,#f4dd51 90%,#0000),
    radial-gradient(farthest-side at top    right,#f4dd51 90%,#0000),
    radial-gradient(farthest-side at top    left ,#f4dd51 90%,#0000),
    radial-gradient(farthest-side at bottom right,#e3aad6 90%,#0000),
    radial-gradient(farthest-side at bottom left ,#e3aad6 90%,#0000),
    radial-gradient(farthest-side at top    right,#e3aad6 90%,#0000),
    radial-gradient(farthest-side at top    left ,#e3aad6 90%,#0000);
  background-size: 25% 25%;
  background-repeat: no-repeat;
  animation: hq-l16 2s infinite;
}

.hq-loader--sm { --hq-loader-size: 32px; }
.hq-loader--md { --hq-loader-size: 48px; }
.hq-loader-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.hq-loader-inline-host[aria-busy="true"] { min-height: 72px; }

@keyframes hq-l16{
  0% {background-position: 
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
  16.67% {background-position: 
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
  33.33% {background-position: 
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
  50% {background-position: 
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3)}
  66.67% {background-position: 
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3)}
  83.33% {background-position: 
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3)}
  100% {background-position: 
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
}

@media (prefers-reduced-motion: reduce) {
  .hq-loader { animation-duration: 6s; }
  .hq-loader-overlay { transition-duration: 250ms; }
}

@media (max-width: 640px) {
  .hq-loader-wrap { padding: 20px; }
}