.spinner {
	color: white;
	display: inline-block;
	font-family: "icon-12";
	font-size: 12px;
	font-weight: 900;
	line-height: 17px;
	min-height: 24px;
	min-width: 24px;
	position: relative;
	text-align: center;
}

.spinner.spinner-small {
	line-height: 17px;
	height: 24px;
	width: 24px;
	&:before {
		font-size: 12px;
		height: 24px;
		width: 24px;
		margin-left: -12px;
		padding-left: 1px;
	}
}
.spinner.spinner-small:not(:required):before {
	border: 3px solid rgba($white, 0);
	border-bottom-color: $brand-success;
	border-left-color: $brand-success;
	border-top-color: $brand-success;
}

.spinner.spinner-medium {
	line-height: 26px;
	height: 36px;
	width: 36px;
	&:before {
		font-size: 16px;
		height: 36px;
		width: 36px;
		margin-left: -18px;
		padding-left: 2px;
	}
}
.spinner.spinner-medium:not(:required):before {
	border: 4px solid rgba($white, 0);
	border-bottom-color: $brand-success;
	border-left-color: $brand-success;
	border-top-color: $brand-success;
}

.spinner.spinner-large {
	line-height: 34px;
	height: 48px;
	width: 48px;
	&:before {
		font-size: 24px;
		height: 48px;
		width: 48px;
		margin-left: -24px;
		padding-left: 2px;
	}
}
.spinner.spinner-large:not(:required):before {
	border: 5px solid rgba($white, 0);
	border-bottom-color: $brand-success;
	border-left-color: $brand-success;
	border-top-color: $brand-success;
}

.spinner:before {
	height: 24px;
	position: absolute;
	width: 24px;
	margin-left: -12px;
}

.spinner:not(:required):before {
	content: "";
	border-radius: 50%;
	border: 3px solid white;
	border-bottom-color: $brand-success;
	border-left-color: $brand-success;
	border-top-color: $brand-success;
	animation: rotate-360 .6s linear infinite;
}

.spinner-done:not(:required):before {
	content: "\E01A";
	background: $brand-success;
	border-color: $brand-success;
	animation: none;
}

.spinner.spinner-danger:not(:required):before {
	border-bottom-color: $brand-danger;
	border-left-color: $brand-danger;
	border-top-color: $brand-danger;
}

.spinner.spinner-danger.spinner-done:not(:required):before {
	background: $brand-danger;
	border-color: $brand-danger;
}

.spinner.spinner-warning:not(:required):before {
	border-bottom-color: $brand-warning;
	border-left-color: $brand-warning;
	border-top-color: $brand-warning;
}

.spinner.spinner-warning.spinner-done:not(:required):before {
	background: $brand-warning;
	border-color: $brand-warning;
}

.spinner.spinner-white:not(:required):before {
	border-color: rgba($white, 0);
	border-bottom-color: $white;
	border-left-color: $white;
	border-top-color: $white;
}

.spinner.spinner-left {
	margin-right: 10px;
}

.spinner.spinner-right {
	margin-left: 10px;
}

.btn .spinner,
.label .spinner, {
	top: 6px;
}

.label .spinner.spinner-left {
	margin-right: 8px;
}

.label .spinner.spinner-right {
	margin-left: 8px;
}

.label .spinner:not(:required):before {
	top: 0px;
	font-size: 16px;
	font-family: 'icon-16';
	line-height: 24px;
	content: "\E061";
	background: rgba($white, 0);
	border: 0px solid $white;
	width: 24px;
	height: 24px;
	padding: 0;
	animation: rotate-360 1s linear infinite;
}

.label .spinner,
.label .spinner.spinner-success {
	color: $brand-success;
}

.label .spinner.spinner-danger {
	color: $brand-danger;
}

.label .spinner.spinner-warning {
	color: $brand-warning;
}

.label .spinner.spinner-white {
	color: $white;
}

@keyframes rotate-360 {
	to {
		transform: rotate(360deg);
	}
}

@keyframes rotate-360-inverse {
	to {
		transform: rotate(-360deg);
	}
}