:host {
  --spinner-size: 1rem; /* token-gap: pending component.spinner.spinner-size-sm */

  display: inline-block;
  width: var(--spinner-size);
  height: var(--spinner-size);
}

:host([size='large']) {
  --spinner-size: 2rem; /* token-gap: pending component.spinner.spinner-size-lg */
}

svg {
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: lmvz-spinner-rotate var(--lmvz-global-duration-slow, 800ms) linear infinite;
  color: var(--lmvz-semantic-color-border-active, #0f8acc);
}

circle {
  fill: none;
  stroke: currentcolor;
  stroke-width: var(--lmvz-component-icon-border-width-strong, 1.5px);
  stroke-linecap: round;
  stroke-dasharray: 75 25;
  vector-effect: non-scaling-stroke;
}

@keyframes lmvz-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  svg {
    animation: none;
  }
}