.spinner {
  width: 1em;
  height: 1em;
  aspect-ratio: 1;
  border-radius: 50%;
  --color: currentColor;
  background:
    radial-gradient(farthest-side, var(--color) 94%, #0000) top/4px 4px no-repeat,
    conic-gradient(#0000 30%, var(--color));
  mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
  animation: spinner 1s infinite linear;

  &[data-color='inherit'] {
    --color: currentColor;
  }
  &[data-color='black'] {
    --color: var(--bi-basic-key);
  }

  &[data-size='2xl'] {
    font-size: var(--bi-scale-12x);
  }

  &[data-size='xl'] {
    font-size: var(--bi-scale-10x);
  }

  &[data-size='large'] {
    font-size: var(--bi-scale-8x);
  }

  &[data-size='medium'] {
    font-size: var(--bi-scale-6x);
  }

  &[data-size='small'] {
    font-size: var(--bi-scale-5x);
  }
}

@keyframes spinner {
  100% {
    transform: rotate(1turn);
  }
}