void-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

void-spinner::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--void-color-border);
  border-top-color: var(--void-color-accent);
  border-radius: var(--void-radius-full);
  animation: void-spin 0.6s linear infinite;
}

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

/* Sizes */
void-spinner[size="sm"] { width: 1rem; height: 1rem; }
void-spinner[size="sm"]::before { border-width: 1.5px; }
void-spinner[size="lg"] { width: 2rem; height: 2rem; }
void-spinner[size="lg"]::before { border-width: 3px; }
void-spinner[size="xl"] { width: 2.5rem; height: 2.5rem; }
void-spinner[size="xl"]::before { border-width: 3.5px; }
void-spinner[size="xxl"] { width: 3.5rem; height: 3.5rem; }
void-spinner[size="xxl"]::before { border-width: 4px; }

/* Screen reader text (rendered by the component) */
void-spinner [data-void-sr] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}