/* Attesa a schermo intero, per quando i dati devono arrivare dal database.
   Un velo trasparente ferma i clic: senza, si preme due volte lo stesso tasto
   e la richiesta parte due volte. */

.bl-loader {
  position: fixed;
  inset: 0;
  z-index: var(--bl-z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bl-space-3);
  background-color: var(--bl-color-veil-soft);
  backdrop-filter: blur(2px);
}

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

/* Un anello che gira. Prima era un quadrato con un lato colorato che ruotava:
   arrivava da un altro prodotto, e per giunta era un bordo accentato su un solo
   lato (aCSS.003). L'anello e' in SVG: il tratto non e' un bordo CSS, quindi il
   cerchio non passa dal raggio (aCSS.001) e resta un indicatore di attesa, che
   e' una convenzione, non decorazione. */
.bl-loader-ring {
  width: 2.75rem;
  height: 2.75rem;
}

.bl-loader-ring svg {
  width: 100%;
  height: 100%;
  animation: bl-loader-turn 0.9s linear infinite;
}

.bl-loader-track,
.bl-loader-arc {
  fill: none;
  stroke-width: 3;
}

.bl-loader-track {
  stroke: var(--bl-color-accent-soft);
}

/* Un quarto di circonferenza: 2*pi*19 = 119,4, quindi 30 di tratto e il resto
   di vuoto. Estremi arrotondati, che e' l'unico posto dove servono. */
.bl-loader-arc {
  stroke: var(--bl-color-accent);
  stroke-linecap: round;
  stroke-dasharray: 30 90;
}

.bl-loader-word {
  padding: var(--bl-space-1) var(--bl-space-3);
  border-radius: var(--bl-radius-chip);
  background-color: var(--bl-color-surface);
  color: var(--bl-color-text);
  font-size: var(--bl-text-small);
  box-shadow: var(--bl-shadow-panel);
}

.bl-loader-word:empty {
  display: none;
}

@keyframes bl-loader-turn {
  to { transform: rotate(360deg); }
}

/* Chi ha chiesto meno movimento vede l'anello pulsare invece che girare:
   sparire del tutto lascerebbe la pagina ferma senza spiegazioni. */
@media (prefers-reduced-motion: reduce) {
  .bl-loader-ring svg {
    animation: bl-loader-pulse 1.6s ease-in-out infinite;
  }

  @keyframes bl-loader-pulse {
    50% { opacity: 0.35; }
  }
}