.mx-animated-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  overflow: visible;
  color: #000;
}

.mx-animated-icon__clock-hand {
  transform-box: view-box;
  transform-origin: 12px 12px;
  animation: mx-clock-hand-clockwise 60s linear infinite;
}

.mx-animated-icon__globe-sweep {
  animation: mx-globe-one-way-turn 2.7s linear infinite;
  transform-box: view-box;
  transform-origin: 12px 12px;
}

@keyframes mx-globe-one-way-turn {
  from { transform: translateX(-6px); }
  to { transform: translateX(6px); }
}

@keyframes mx-clock-hand-clockwise {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-animated-icon__globe-sweep,
  .mx-animated-icon__clock-hand {
    animation-play-state: paused;
  }
}