@keyframes a-loading {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.loader {
	display: flex;
	align-items: center;
	justify-content: center;

	&--centered {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
	}

	&--light {
		.loader__dot {
			background-color: $c-white;
		}
	}
}

.loader__dot {
	display: inline-block;
	width: rem(8);
	height: rem(8);
	background-color: $c-primary;
	border-radius: 100%;
	animation: a-loading 600ms ease-in-out infinite alternate;

	+ .loader__dot {
		margin-left: spacing('extra-tight');
	}

	@for $i from 1 through 3 {
		&:nth-child(#{$i}) {
			animation-delay: #{$i * 80}ms;
		}
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.circle-loader {
	line-height: 0;
	> div {
		display: inline-block;
		width: 1rem;
		height: 1rem;
		border: 3px solid $c-primary;
		border-bottom-color: transparent;
		border-radius: 100%;
		animation: spin 0.75s 0s linear infinite;
	}

	&.circle-loader--light {
		> div {
			border-color: $c-white;
			border-bottom-color: transparent;
		}
	}
}