@use '~@quartz/styles/scss/color-scheme';
@use '~@quartz/styles/scss/fonts';
@use '~@quartz/styles/scss/helpers/a11y';
@use '~@quartz/styles/scss/helpers/resets';
@use '~@quartz/styles/scss/states';

/* from https://projects.lukehaas.me/css-loaders/ */

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.container {
	border-radius: 50%;
	width: 1.25rem;
	height: 1.25rem;
	display: inline-block;
	transform: translateZ(0);
	animation: spin 1.1s infinite cubic-bezier(0.32, 0.64, 0.71, 0.74);
	border: 2px solid color-scheme.$accent;
	border-top: 2px solid color-scheme.$background-1;
}

.label {
	@include a11y.visually-hidden;
}

.timeout-message {
	@include fonts.maison-500-2;
}

.reload {
	@include resets.button;
	@include states.fade-on-hover;

	cursor: pointer;
	color: color-scheme.$accent;
}