/* Vyvace - indicatore ad anello v2. Caricare dopo i CSS del Design System.
   Sostituisce solo il token LoadingResults; mantiene maschere e tempi GeneXus. */
:root {
  --GX-Image_LoadingResults: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='14' fill='none' stroke='%231d4ed8' stroke-opacity='.28' stroke-width='4'/%3E%3Ccircle cx='18' cy='18' r='14' fill='none' stroke='%231d4ed8' stroke-width='4' stroke-linecap='round' stroke-dasharray='24 64'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --GX-Image_LoadingResults: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='14' fill='none' stroke='%231d4ed8' stroke-opacity='.28' stroke-width='4'/%3E%3Ccircle cx='18' cy='18' r='14' fill='none' stroke='%231d4ed8' stroke-width='4' stroke-linecap='round' stroke-dasharray='24 64'/%3E%3C/svg%3E");
  }
}

/* La velatura resta al 10%, ma non attenua piu l'immagine dell'anello.
   Conserva durata e ritardo GeneXus e l'animationend usato per rimuovere la maschera. */
div.gx-mask {
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
  animation-name: vyvace-ring-mask-enter;
  -webkit-animation-name: vyvace-ring-mask-enter;
}
div.gx-mask.gx-unmask {
  background-color: transparent;
  animation-name: vyvace-ring-mask-leave;
  -webkit-animation-name: vyvace-ring-mask-leave;
}
@keyframes vyvace-ring-mask-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes vyvace-ring-mask-leave {
  from { opacity: 1; }
  to { opacity: 0; }
}