@import (once) "vars";
@import (once) "transform";
@import (once) "utils";
@import (once) "animations";

.preloader {
	&-ring {
		position: relative;

		padding-top: @accentTextFontSize/5;
		.square(@preloaderRingSize);
		margin: .625rem;

		& > .wrap {
			position: absolute;
			.square(@preloaderRingSize - 2);

			& > .circle {
				opacity: 0;
				.square(@preloaderRingSize - 2);
				.rotate(225deg);
				.animate(orbit @preloaderRingTime infinite);

				&:after {
					position: absolute;
					content: '';
					.square(@preloaderRingSize / 8);
					border-radius: @preloaderRingSize / 8;
					background: @preloaderColor;
				}
			}

			&:nth-child(2) {
				.rotate(@preloaderRingRotate);
				& > .circle {
					animation-delay: @preloaderRingTime / @preloaderRingTimeMute;
				}
			}

			&:nth-child(3) {
				.rotate(@preloaderRingRotate*2);
				& > .circle {
					animation-delay: @preloaderRingTime / @preloaderRingTimeMute*2;
				}
			}

			&:nth-child(4) {
				.rotate(@preloaderRingRotate*3);
				& > .circle {
					animation-delay: @preloaderRingTime / @preloaderRingTimeMute*3;
				}
			}

			&:nth-child(5) {
				.rotate(@preloaderRingRotate*4);
				& > .circle {
					animation-delay: @preloaderRingTime / @preloaderRingTimeMute*4;
				}
			}
		}

		&.dark-style {
			& > .wrap {
				& > .circle {
					&:after {
						background-color: @preloaderColorDark;
					}
				}
			}
		}

        &.color-style {
            & > .wrap {
                & > .circle {
                    &:after {
                        background-color: @cyan;
                    }
                }
            }
            & > .wrap:nth-child(2) {
                & > .circle {
                    &:after {
                        background-color: @orange;
                    }
                }
            }
            & > .wrap:nth-child(3) {
                & > .circle {
                    &:after {
                        background-color: @green;
                    }
                }
            }
            & > .wrap:nth-child(4) {
                & > .circle {
                    &:after {
                        background-color: @red;
                    }
                }
            }
            & > .wrap:nth-child(5) {
                & > .circle {
                    &:after {
                        background-color: @yellow;
                    }
                }
            }
        }
	}

	&-metro {
		overflow: hidden;
		position: relative;

		width: 100%;
		height: 10px;
		background-color: @transparent;

		& > .circle {
			display: inline-block;
			position: absolute;
			.square(10px);
			background-color: @preloaderColor;
			opacity: 0;
			margin-left: 5px;
			animation: metro-slide 3s cubic-bezier(.1,.85,.9,.15) infinite, metro-opacity 2s ease-in-out infinite alternate;

			&:nth-child(2){
				animation-delay: .8s;
			}
			&:nth-child(3){
				animation-delay: .7s;
			}
			&:nth-child(4){
				animation-delay: .6s;
			}
			&:nth-child(5){
				animation-delay: .5s;
			}
		}

		&.dark-style {
			& > .circle {
				background-color: @preloaderColorDark;
			}
		}

        &.color-style {
            & > .circle {
                background-color: @cyan;
            }
            & > .circle:nth-child(2) {
                background-color: @orange;
            }
            & > .circle:nth-child(3) {
                background-color: @green;
            }
            & > .circle:nth-child(4) {
                background-color: @red;
            }
            & > .circle:nth-child(5) {
                background-color: @yellow;
            }
        }
	}

	&-square {
		position: relative;
		width: 40px;
		height: 40px;
		overflow: hidden;
		transform-origin: bottom left;
		animation: ani-shrink 1s linear infinite;

		.square {
			position: absolute;
			width: 19px;
			height: 19px;
			background: @preloaderColor;

			&:nth-child(1) {
				left: 0;
				top: 21px;
			}

			&:nth-child(2) {
				left: 21px;
				top: 21px;
				animation: ani-drop 1s linear infinite;
			}

			&:nth-child(3) {
				left: 0;
				top: 0;
				animation: ani-drop2 1s linear infinite;
			}

			&:nth-child(4) {
				left: 21px;
				top: 0;
				animation: ani-drop3 1s linear infinite;
			}
		}

		&.dark-style {
			& > .square {
				background-color: @preloaderColorDark;
			}
		}

		&.color-style {

			& > .square:nth-child(1) {
				background-color: @orange;
			}

			& > .square:nth-child(2) {
				background-color: @green;
			}

			& > .square:nth-child(3) {
				background-color: @cyan;
			}

			& > .square:nth-child(4) {
				background-color: @yellow;
			}
		}
	}

	&-cycle {
		width: 64px;
		height: 64px;
		position: relative;
		overflow: hidden;

		.cycle {
			display: block;
			position: relative;
			left: 50%;
			top: 50%;
			width: 64px;
			height: 64px;
			margin: -32px 0 0 -32px;
			border-radius: 50%;
			border: 3px solid transparent;
			border-top-color: @white;
			animation: ani-pre-spin 1s linear infinite;
			z-index: 1001;

			&:before {
				content: "";
				position: absolute;
				top: 5px;
				left: 5px;
				right: 5px;
				bottom: 5px;
				border-radius: 50%;
				border: 3px solid transparent;
				border-top-color: @white;
				animation: ani-pre-spin 2s linear infinite;
			}

			&:after {
				content: "";
				position: absolute;
				top: 15px;
				left: 15px;
				right: 15px;
				bottom: 15px;
				border-radius: 50%;
				border: 3px solid transparent;
				border-top-color: @white;
				animation: spin 1.5s linear infinite;
			}
		}

		&.dark-style {
			.cycle {
				border-top-color: @dark;

				&:before {
					border-top-color: @dark;
				}

				&:after {
					border-top-color: @dark;
				}
			}
		}

		&.color-style {
			.cycle {
				border-top-color: #3498db;

				&:before {
					border-top-color: #e74c3c;
				}

				&:after {
					border-top-color: #f9c922;
				}
			}
		}
	}
}