/*
 *  Usage:
 *
      <div class="sm-loading">
        <div class="sm-loading-child"></div>
        <div class="sm-loading-child"></div>
        <div class="sm-loading-child"></div>
      </div>
 *
 */

.sm-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    opacity:0;
    z-index: 0;
    transition: opacity 0.3s;
    
    &.fadein{
	    opacity:1;
    }
}

.sm-loading {
	$animationDuration: 1.4s;
	$delayRange: 0.32s;
	
	margin: $loading-margin;
	width: $loading-size * 2;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	
	.sm-loading-child {
		width: $loading-size / 2;
		height: $loading-size / 2;
		background-color: $loading-color;
		
		border-radius: 100%;
		display: inline-block;
		animation: sm-loading $animationDuration ease-in-out 0s infinite both;
		
		&:first-child{
		    animation-delay: -$delayRange; 
		}
		&:nth-child(2){
		    animation-delay: -$delayRange / 2;
		}
	}
}

@keyframes sm-loading {
	0%, 80%, 100% {
		transform: scale(0);
	} 40% {
		transform: scale(1.0);
	}
}