:host {
  --_arc-color: var(--spinner-arc-color-brand);
  --_size: var(--spinner-size-md);
  --_stroke-width: var(--spinner-stroke-width-md);

  display: inline-block;
  position: relative;
  flex-shrink: 0;
  inline-size: var(--_size);
  block-size: var(--_size);
}

:host([size='xs']) {
  --_size: var(--spinner-size-xs);
  --_stroke-width: var(--spinner-stroke-width-xs);
}

:host([size='sm']) {
  --_size: var(--spinner-size-sm);
  --_stroke-width: var(--spinner-stroke-width-sm);
}

:host([size='md']) {
  --_size: var(--spinner-size-md);
  --_stroke-width: var(--spinner-stroke-width-md);
}

:host([size='lg']) {
  --_size: var(--spinner-size-lg);
  --_stroke-width: var(--spinner-stroke-width-lg);
}

:host([variant='brand']) {
  --_arc-color: var(--spinner-arc-color-brand);
}

:host([variant='dark']) {
  --_arc-color: var(--spinner-arc-color-dark);
}

:host([variant='light']) {
  --_arc-color: var(--spinner-arc-color-light);
}

:host([variant='light-on-color']) {
  --_arc-color: var(--spinner-arc-color-light-on-color);
}

/* Figma draws the spinner as a 270deg ring with flat ends, its gap in the top-right quarter
   (44:422 and its siblings). A conic fill cut into a ring by a radial mask gives that shape at the
   exact stroke width, including 2.5px and 3.75px, which a CSS border cannot draw (Chromium rounds
   a border down to a whole device pixel). The 1px ramp in the mask is the edge's anti-aliasing.
   A mask reads only alpha, so its opaque stop is `CanvasText`, a system colour that is always
   opaque: no hex, and no theme colour the mask would depend on. */
.arc {
  position: absolute;
  inset: 0;
  display: inline-block;
  border-radius: 50%;
  box-sizing: border-box;
  background: conic-gradient(from 90deg, var(--_arc-color) 0deg 270deg, transparent 270deg 360deg);
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--_stroke-width) - 0.5px),
    CanvasText calc(100% - var(--_stroke-width) + 0.5px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--_stroke-width) - 0.5px),
    CanvasText calc(100% - var(--_stroke-width) + 0.5px)
  );
  animation: spinner-rotate var(--spinner-transition-duration) var(--spinner-transition-timing-function) infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .arc {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}