/* Shared by the pre-React splash and the React transition component. */
.ms-loading-icon {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 22%;
}
.ms-loading-icon img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.ms-loading-icon__base { filter: grayscale(1); opacity: .25; }
.ms-loading-icon__fill {
  animation: ms-icon-fill 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
  clip-path: inset(100% 0 0 0);
}
@keyframes ms-icon-fill {
  0%, 8% { clip-path: inset(100% 0 0 0); opacity: 1; }
  72%, 86% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-loading-icon__fill { animation: none; clip-path: inset(0); opacity: 1; }
}