@import "/UI/Styles/_Theme.scss";

.spinner {
	width: 16px;
	height: 16px;
	border: 2px solid $primary-soft;
	border-top-color: $primary;
	border-radius: 50%;
	animation: sunless-spin 0.9s linear infinite;
	flex-shrink: 0;
}

.spinner-lg { width: 24px; height: 24px; border-width: 3px; }
.spinner-xl { width: 32px; height: 32px; border-width: 3px; }

.spinner-on-primary {
	border-color: rgba(0, 0, 0, 0.25);
	border-top-color: $primary-ink;
}

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

.btn.is-spinning {
	color: $primary;
	border-color: $primary;
	gap: 8px;

	&:before {
		content: "";
		width: 14px;
		height: 14px;
		border: 2px solid $primary-soft;
		border-top-color: $primary;
		border-radius: 50%;
		animation: sunless-spin 0.9s linear infinite;
	}

	&.primary {
		color: $primary-ink;
		border-color: $primary;
		&:before {
			border-color: rgba(0, 0, 0, 0.25);
			border-top-color: $primary-ink;
		}
	}
}