//  =================
//      Imports
//  =================

@import '../../assets/base/color_variables';    // Color Variables
@import '../../assets/base/fonticons';              // Fonticons Variables
@import '../../assets/base/urls';                   // URLS Variables
@import '../../assets/base/utilities_variables';  // Utilities Variables

/* Safari */
@-webkit-keyframes "spin" {
	0% {
		-webkit-transform: $rotate-0;
	}
	100% {
		-webkit-transform: $rotate-360deg;
	}
}
@keyframes "spin" {
	0% {
		transform: $rotate-0;
	}
	100% {
		transform: $rotate-360deg;
	}
}
@-webkit-keyframes "spinner-border" {
	to {
		-webkit-transform: $rotate-360deg;
		transform: $rotate-360deg;
	}
}
@keyframes "spinner-border" {
	to {
		-webkit-transform: $rotate-360deg;
		transform: $rotate-360deg;
	}
}
@-webkit-keyframes "spinner-grow" {
	0% {
		opacity: 0;
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes "spinner-grow" {
	0% {
		opacity: 0;
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
.loader {
	border: $b-width-7 $solid $color_576;
	border-radius: 50%;
	border-top: $b-width-7 $solid $primary;
	width: 58px;
	height: 58px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}
.loader.dual-loader {
	border-bottom: $b-width-7 $solid $primary;
}
.loader.multi-loader {
	border-bottom: $b-width-7 $solid $warning;
	border-right: $b-width-7 $solid $success;
	border-left: $b-width-7 $solid $danger;
}
.spinner-border {
	position: $pos-rel;
	display: inline-block;
	width: 2rem;
	height: 2rem;
	overflow: hidden;
	text-indent: -999em;
	border: .25em $solid;
	border-color: $currentColor $color_none $currentColor $currentColor;
	border-radius: 50%;
	-webkit-animation-name: spinner-border;
	animation-name: spinner-border;
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.spinner-border-reverse {
	border-color: $color_none $currentColor $color_none $color_none;
	&::after {
		position: $pos-abs;
		top: -.25em;
		right: -.25em;
		bottom: -.25em;
		left: -.25em;
		display: inline-block;
		content: "";
		border: 0.25em $solid $color_378;
		border-radius: 50%;
	}
}
.spinner-grow {
	position: $pos-rel;
	display: inline-block;
	width: 2rem;
	height: 2rem;
	overflow: hidden;
	text-indent: -999em;
	background-color: $currentColor;
	border-radius: 50%;
	-webkit-animation-name: spinner-grow;
	animation-name: spinner-grow;
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.loader-lg {
	width: 2.5rem;
	height: 2.5rem;
	border-width: 0.35em;
}
.loader-sm {
	width: 1.5rem;
	height: 1.5rem;
	border-width: 0.15em;
}