.Spinner {
  width: em(32px);
  height: em(32px);

  /*
  When user prefers reduced motion and that **no fallback has
  been provided to Spinner**, we still prefer it animated.
  A frozen spinner is arguably a worst experience and since
  our spinners are usually small, we believe its ok to ignore
  the user's preference in that case.
  This explains why the duration is hardcoded and not impacted by the
  prefers-reduced-motion media set in style.css.
  */
  animation: fade-in 500ms var(--x-pp-timing-base), rotate 500ms linear infinite;
}

.sizeLarge {
  width: em(64px);
  height: em(64px);
}

.sizeSmall {
  width: em(20px);
  height: em(20px);
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}