.arrow-indicator {
	position: absolute;
	width: 50px;
	height: 50px;
	margin: 0;
	bottom: 10px;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-135deg);
}

.arrow-indicator span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	box-sizing: border-box;
	border: none;
	border-right: 5px solid var(--arrow-indicator-bg-fade);
	border-bottom: 5px solid var(--arrow-indicator-bg-fade);
	transition: border-color var(--global-animation-speed);
}

@keyframes animate-arrow-one {
	0% {
		border-color: var(--arrow-indicator-bg-fade);
	}

	33% {
		border-color: var(--arrow-indicator-bg);
	}

	66% {
		border-color: var(--arrow-indicator-bg-fade);
	}

	100% {
		border-color: var(--arrow-indicator-bg-fade);
	}
}

@keyframes animate-arrow-two {
	0% {
		border-color: var(--arrow-indicator-bg-fade);
	}

	33% {
		border-color: var(--arrow-indicator-bg-fade);
	}

	66% {
		border-color: var(--arrow-indicator-bg);
	}

	100% {
		border-color: var(--arrow-indicator-bg-fade);
	}
}

@keyframes animate-arrow-three {
	0% {
		border-color: var(--arrow-indicator-bg-fade);
	}

	33% {
		border-color: var(--arrow-indicator-bg-fade);
	}

	66% {
		border-color: var(--arrow-indicator-bg-fade);
	}

	100% {
		border-color: var(--arrow-indicator-bg);
	}
}

.arrow-indicator span:nth-child(1) {
	top: -30px;
	left: -30px;
	animation: animate-arrow-one 5s linear infinite;
}

.arrow-indicator span:nth-child(2) {
	top: -15px;
	left: -15px;
	animation: animate-arrow-two 5s linear infinite;
}

.arrow-indicator span:nth-child(3) {
	top: 0;
	left: 0;
	animation: animate-arrow-three 5s linear infinite;
}
