.prs-loading {
  --loading-size: 6;
  pointer-events: none;
  aspect-ratio: 1;
  vertical-align: middle;
  width: calc(1.5rem * var(--loading-size));
  display: inline-block;
  transition-property: width;
  transition-timing-function: var(--prs-transition-timing);
  transition-duration: var(--prs-transition-duration);

  & :where(svg) {
    --color-1: var(--prs-c-info);
    --color-2: var(--prs-c-secondary);
    --color-3: var(--prs-c-primary);
    
    &:has(.spinner) { animation: fader 2s ease infinite; }
    
    .spinner-burst { fill: var(--prs-c-white); transform-origin: 100px 100px; }
    .spinner-center { fill: var(--prs-c-black); }
    .spinner-shape-1 { fill: var(--prs-c-info); }
    .spinner-shape-2 { fill: var(--prs-c-secondary); }
    .spinner-shape-3 { fill: var(--prs-c-primary); }

    @media (prefers-reduced-motion: no-preference) {
      &:has(.spinner) { animation: none; }
      .spinner-burst { animation: spinner 10s linear infinite; }
    }
  }

  &.prs-loading-fade :where(svg):has(.spinner) {
    animation: fader 2s ease infinite !important;
  }

  &.prs-loading-fade :where(svg) .spinner-burst {
    animation: none !important;
  }

  &:where(.prs-loading-reverse) :where(svg) {
    & .spinner-shape-3 { fill: var(--prs-c-white); }
  }

  &:where(.prs-loading-xs) { --loading-size: 1; }
  &:where(.prs-loading-sm) { --loading-size: 2; }
  &:where(.prs-loading-md) { --loading-size: 3; }
  &:where(.prs-loading-lg) { --loading-size: 4; }
  &:where(.prs-loading-xl) { --loading-size: 5; }
}

@keyframes spinner {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fader {
  50% { opacity: 0.5; }
}