.spinner {
	display: inline-block;
	border-radius: 50%;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.1);
	border-top-color: var(--primary-colour);
	animation: spinner-rotate 0.7s linear infinite;
	flex-shrink: 0;
}

.spinner-sm {
	width: 16px;
	height: 16px;
	border-width: 2px;
}

.spinner-md {
	width: 24px;
	height: 24px;
	border-width: 3px;
}

.spinner-lg {
	width: 36px;
	height: 36px;
	border-width: 4px;
}

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

@media screen and (prefers-color-scheme: dark) {
	.spinner {
		border-color: rgba(255, 255, 255, 0.15);
		border-top-color: var(--primary-colour);
	}
}