.c-loading-indicator__dots {
	align-items: center;
	display: flex;
	height: 30px;
	justify-content: center;
	width: 100%;

	&.is-inline {
		overflow: hidden;
		width: auto;
	}

	// Wrapped in .c-loading-indicator__dots class for isolation purposes
	.c-loading-indicator__dot {
		color: #767676;
		display: inline-block;
		font-size: 20px;
		opacity: 0;
	}

	.c-loading-indicator__dot:nth-child(6) {
		animation: loader 3s infinite ease-in-out;
	}

	.c-loading-indicator__dot:nth-child(5) {
		animation: loader 3s 100ms infinite ease-in-out;
	}

	.c-loading-indicator__dot:nth-child(4) {
		animation: loader 3s 200ms infinite ease-in-out;
	}

	.c-loading-indicator__dot:nth-child(3) {
		animation: loader 3s 300ms infinite ease-in-out;
	}

	.c-loading-indicator__dot:nth-child(2) {
		animation: loader 3s 400ms infinite ease-in-out;
	}

	.c-loading-indicator__dot:nth-child(1) {
		animation: loader 3s 500ms infinite ease-in-out;
	}
}

@keyframes loader {
	0% {
		opacity: 0;
		transform: translateX(-300px);
	}

	33%,
	66% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		transform: translateX(300px);
	}
}