@import 'colors';

@keyframes cycle-link-background {
	0% {
		background-image: linear-gradient(
				to right,
				$highlight-3 0%, $highlight-3 10%,
				$highlight-1 10%, $highlight-1 20%,
				$highlight-2 20%, $highlight-2 30%,
				$highlight-3 30%, $highlight-3 40%,
				$highlight-2 40%, $highlight-2 50%,
				$highlight-3 50%, $highlight-3 60%,
				$highlight-1 60%, $highlight-1 70%,
				$highlight-3 70%, $highlight-3 80%,
				$highlight-1 80%, $highlight-1 90%,
				$highlight-2 90%,
		);
	}
	25% {
		background-image: linear-gradient(
				to right,
				$highlight-2 0%, $highlight-2 10%,
				$highlight-3 10%, $highlight-3 20%,
				$highlight-1 20%, $highlight-1 30%,
				$highlight-2 30%, $highlight-2 40%,
				$highlight-3 40%, $highlight-3 50%,
				$highlight-1 50%, $highlight-1 60%,
				$highlight-2 60%, $highlight-2 70%,
				$highlight-1 70%, $highlight-1 80%,
				$highlight-3 80%, $highlight-3 90%,
				$highlight-1 90%
		);
	}
	50% {
		background-image: linear-gradient(
				to right,
				$highlight-3 0%, $highlight-3 10%,
				$highlight-2 10%, $highlight-2 20%,
				$highlight-3 20%, $highlight-3 30%,
				$highlight-1 30%, $highlight-1 40%,
				$highlight-2 40%, $highlight-2 50%,
				$highlight-3 50%, $highlight-3 60%,
				$highlight-1 60%, $highlight-1 70%,
				$highlight-2 70%, $highlight-2 80%,
				$highlight-1 80%, $highlight-1 90%,
				$highlight-3 90%
		);
	}
	75% {
		background-image: linear-gradient(
				to right,
				$highlight-1 0%, $highlight-1 10%,
				$highlight-3 10%, $highlight-3 20%,
				$highlight-2 20%, $highlight-2 30%,
				$highlight-1 30%, $highlight-1 40%,
				$highlight-3 40%, $highlight-3 50%,
				$highlight-1 50%, $highlight-1 60%,
				$highlight-2 60%, $highlight-2 70%,
				$highlight-1 70%, $highlight-1 80%,
				$highlight-2 80%, $highlight-2 90%,
				$highlight-3 90%
		);
	}
}