duration = 0.8s
size = 24px

#loading-animation
	display block
	position fixed
	bottom 1.15rem
	right 1.15rem
	pointer-events none

.sk-cube-grid
	width size
	height size
	transform rotateZ(0deg)
	animation sk-rotate duration infinite linear

	.sk-cube
		width 33.3%
		height 33.3%
		background-color alpha(linkHoverColor, 70%)
		box-shadow 0 0 size alpha(linkHoverColor, 80%)
		float left
		animation sk-cube-grid duration infinite linear
		border-radius 100%

	.sk-cube5
		background-color linkHoverColor
		box-shadow 0 0 size alpha(linkHoverColor, 90%)

	.sk-cube1
	.sk-cube3
	.sk-cube7
	.sk-cube9
		visibility hidden

@keyframes sk-cube-grid
	0%, 100%
		transform scale3D(0.4, 0.4, 0.4)
	50%
		transform scale3D(0.9, 0.9, 0.9)

@keyframes sk-rotate
	0%
		transform rotateZ(0deg)
	100%
		transform rotateZ(360deg)

// Anime list loading
.sk-folding-cube
	margin 20px auto
	width 40px
	height 40px
	position relative
	transform rotateZ(45deg)
	.sk-cube
		float left
		width 50%
		height 50%
		position relative
		transform scale(1.1)
		&:before
			content ''
			position absolute
			top 0
			left 0
			width 100%
			height 100%
			background-color mainColor
			animation sk-foldCubeAngle 2.4s infinite linear both
			transform-origin 100% 100%
	.sk-cube2
		transform scale(1.1) rotateZ(90deg)
		&:before
			animation-delay 0.3s
	.sk-cube3
		transform scale(1.1) rotateZ(180deg)
		&:before
			animation-delay 0.6s
	.sk-cube4
		transform scale(1.1) rotateZ(270deg)
		&:before
			animation-delay 0.9s

@keyframes sk-foldCubeAngle
	0%, 10%
		transform perspective(140px) rotateX(-180deg)
		opacity 0

	25%, 75%
		transform perspective(140px) rotateX(0deg)
		opacity 1

	90%, 100%
		transform perspective(140px) rotateY(180deg)
		opacity 0