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

.spinner {
	display: inline-block;
	border-style: solid;
	border-width: var(--component-border-width-lg);
	border-color: var(--stroke-subtle);
	border-top-color: var(--stroke-strong);

	border-radius: var(--component-radii-pill);
	animation: spinner 800ms linear infinite;
}

.xsmall {
	width: var(--size-75);
	height: var(--size-75);
}

.small {
	width: var(--size-100);
	height: var(--size-100);
}

.medium {
	width: var(--size-150);
	height: var(--size-150);
}

.large {
	width: var(--size-200);
	height: var(--size-200);
}