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

SSpin {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  animation-name: spin-rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 0.75s;
  fill: var(--theme);
}

SSpin[theme='dark'] {
  fill: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
}

SSpin[theme='invert'] {
  fill: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
}

SSpin[centered] {
  margin: auto;
}

SSpin[size='xs'] {
  width: 16px;
  height: 16px;
}

SSpin[size='s'] {
  width: 20px;
  height: 20px;
}

SSpin[size='m'] {
  width: 24px;
  height: 24px;
}

SSpin[size='l'] {
  width: 32px;
  height: 32px;
}

SSpin[size='xl'] {
  width: 48px;
  height: 48px;
}

SSpin[size='xxl'] {
  width: 72px;
  height: 72px;
}

@media (prefers-reduced-motion) {
  SSpin {
    animation-name: none;
  }
}