//
// _loader
//
//
// ********************************************************************************************************************************


// Variables
$ui-loader-bar-width: 4px;
$ui-loader-bar-height: 20px;
$ui-loader-bar-color: #000;
$ui-loader-bar-radius: 2px;

// Extends
%loader-bar {
	width: $ui-loader-bar-width;
	height: $ui-loader-bar-height;
	background-color: $ui-loader-bar-color;
	border-radius: $ui-loader-bar-radius;
}

// Linear
@include keyframes(#{$namespace}loader-linear) {
	0%,
	80%,
	100% {
		box-shadow:0 0 $ui-loader-bar-color;
		height:$ui-loader-bar-height;
	}
	40% {
		box-shadow:0 -5px $ui-loader-bar-color;
		height:$ui-loader-bar-height+5;
	}
}

@include keyframes(#{$namespace}linear-b) {
	0% {
  		background-color:transparent;
  	}
  	50% {
  		background-color:$ui-loader-bar-color;
  	}
  	100% {
  		background-color:transparent;
	}
}

.#{$namespace}loader-linear {@include transform(translateZ(0)); margin:0 10px;
	&.#{$namespace}loader-linear-b {@include animation(#{$namespace}linear-b 1s linear infinite); @include animation-delay(0.2s);
		&:before {@include animation(#{$namespace}linear-b 1s linear infinite);}
        &:after {@include animation(#{$namespace}linear-b 1s linear infinite); @include animation-delay(0.4s);}
	}
}
.#{$namespace}loader-linear {@extend %loader-bar; @include animation(#{$namespace}loader-linear 1.0s ease-in-out infinite);
	&:before, &:after {position:absolute; content:''; top:0; @extend %loader-bar; @include animation(#{$namespace}loader-linear 1.0s ease-in-out infinite);}
	&:before {left: -1 * ($ui-loader-bar-width + $ui-loader-bar-width/2); @include animation-delay(-0.16s);}
	&:after {left:$ui-loader-bar-width + $ui-loader-bar-width/2;; @include animation-delay(0.16s);}
}

// Circular
@include keyframes(#{$namespace}loader-circular) {
	to {@include transform(rotate(360deg));}
}

.#{$namespace}loader-circular {position:relative; width:30px; height:30px;
	&:before {position:absolute; content:'Loading?'; top:50%; left:50%; width:24px; height:24px; margin-top:-13px; margin-left:-13px;}
	&:not(:required):before {content:''; border-radius:50%; border:1px solid #ccc; border-top-color:#000; @include animation(#{$namespace}loader-circular 0.6s linear infinite);}
	&.#{$namespace}loader-circular-b {
		&:not(:required):before {border:none; border-top:2px solid #000; border-right:2px solid transparent;}
	}
}