/* ==========================================================================
   Spinner layout styles
   ========================================================================== */

#qodef-page-spinner {
	
	&.qodef-layout--five-rotating-circles {
		
		.qodef-m-five-rotating-circles {
			position: relative;
			width: 60px;
			height: 60px;
			margin: -30px 0 0 -30px;
		}
		
		.qodef-m-circle-item {
			position: absolute;
			width: 100%;
			height: 100%;
			
			&.qodef-item--1 {
				
				@for $i from 2 through 4 {
					.qodef-circle--#{$i} {
						animation-delay: calc((#{$i* 300ms}) - 1500ms);
					}
				}
			}
			
			&.qodef-item--2 {
				transform: rotateZ(45deg);
				
				@for $i from 1 through 4 {
					.qodef-circle--#{$i} {
						animation-delay: calc((#{$i* 300ms}) - 1400ms);
					}
				}
			}
			
			&.qodef-item--3 {
				transform: rotateZ(90deg);
				
				@for $i from 1 through 4 {
					.qodef-circle--#{$i} {
						animation-delay: calc((#{$i* 300ms}) - 1300ms);
					}
				}
			}
		}
		
		.qodef-e-circle {
			position: absolute;
			width: 12px;
			height: 12px;
			background-color: currentColor;
			border-radius: 100%;
			animation: qode-bounce-delay 1.2s infinite ease-in-out both;
			
			&.qodef-circle--1 {
				top: 0;
				left: 0;
			}
			
			&.qodef-circle--2 {
				top: 0;
				right: 0;
			}
			
			&.qodef-circle--3 {
				right: 0;
				bottom: 0;
			}
			
			&.qodef-circle--4 {
				left: 0;
				bottom: 0;
			}
		}
	}
}
