//  =================
//      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

@keyframes cp-round-animate {
	0% {
		transform: $rotate-0;
	}
	100% {
		transform: $rotate-360deg;
	}
}
@keyframes cp-balls-animate {
	0% {
		transform: $rotate-0;
	}
	100% {
		transform: $rotate-360deg;
	}
}
@keyframes cp-balls-animate-before {
	0% {
		transform: translate(-5px, -5px);
	}
	50% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(-5px, -5px);
	}
}
@keyframes cp-balls-animate-after {
	0% {
		transform: translate(5px, 5px);
	}
	50% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(5px, 5px);
	}
}
@keyframes cp-bubble-animate {
	0% {
		opacity: .5;
		transform: scale(1) translateX(0);
	}
	25% {
		opacity: 1;
		transform: scale(1.1) translateX(-15px);
	}
	50% {
		opacity: 1;
		transform: scale(1.2) translateX(15px);
	}
	100% {
		opacity: .5;
		transform: scale(1) translateX(0);
	}
}
@keyframes cp-bubble-animate-before {
	0% {
		opacity: .5;
		transform: scale(1);
	}
	25% {
		transform: scale(1.1);
	}
	100%,50% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes cp-bubble-animate-after {
	0%,50% {
		opacity: .5;
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100%,75% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes cp-skeleton-animate {
	0% {
		transform: $rotate-0;
		opacity: 1;
	}
	50% {
		opacity: .7;
	}
	100% {
		transform: $rotate-360deg;
		opacity: 1;
	}
}
@keyframes cp-eclipse-animate {
	0% {
		transform: $rotate-0;
	}
	100% {
		transform: $rotate-360deg;
	}
}
@keyframes cp-boxes-animate-before {
	0% {
		transform: translateX(-24px) $rotate-45deg;
	}
	50% {
		transform: translateX(-8px) rotate(225deg);
	}
	100% {
		transform: translateX(-24px) $rotate-45deg;
	}
}
@keyframes cp-boxes-animate-after {
	0% {
		transform: translateX(24px) $rotate-45deg;
	}
	50% {
		transform: translateX(8px) rotate(-225deg);
	}
	100% {
		transform: translateX(24px) $rotate-45deg;
	}
}
@keyframes cp-morph-animate {
	0% {
		transform: $rotate-0 scale(1);
		border-radius: 0;
		background: $color_294;
	}
	25%,75% {
		transform: $rotate-180deg scale(.4);
		border-radius: 50%;
		background: $color_3;
	}
	100% {
		transform: $rotate-360deg scale(1);
		border-radius: 0;
		background: $color_294;
	}
}
@keyframes cp-heart-animate {
	0% {
		transform: scale(.9);
	/*transform-origin: center*/
	}
	15% {
		transform: scale(1.4);
	/*transform-origin: center*/
	}
	30% {
		transform: scale(.9);
	/*transform-origin: center*/
	}
	45% {
		transform: scale(1.4);
	/*transform-origin: center*/
	}
	100%,60% {
		transform: scale(.9);
	/*transform-origin: center*/
	}
}
@keyframes cp-meter-animate-before {
	0% {
		transform: rotate(-45deg);
	}
	100% {
		transform: rotate(315deg);
	}
}
.cp-spinners {
	margin: $m-10 auto;
}
.cp-spinner-block {
	display: inline-block;
	width: 100%;
	margin: $m-40 auto;
	span {
		color: $additional-color-11;
		display: block;
		padding: $p-5 $p-0;
	}
	pre {
		font-size: .75em;
		color: $additional-color-2;
		background-color: $color_578;
		padding: 16px 8px;
		border-radius: $br-6;
		font-family: $font_family_14;
		display: inline-block;
		white-space: normal;
		overflow: hidden;
	}
}
.cp-spinner {
	width: 48px;
	height: 48px;
	display: inline-block;
	box-sizing: border-box;
	position: $pos-rel;
}
.cp-round {
	&:before {
		border-radius: 50%;
		content: " ";
		width: 48px;
		height: 48px;
		display: inline-block;
		box-sizing: border-box;
		border-top: $solid $b-width-6 $color_50;
		border-right: $solid $b-width-6 $color_50;
		border-bottom: $solid $b-width-6 $color_50;
		border-left: $solid $b-width-6 $color_50;
		position: $pos-abs;
		top: 0;
		left: 0;
	}
	&:after {
		border-radius: 50%;
		content: " ";
		width: 48px;
		height: 48px;
		display: inline-block;
		box-sizing: border-box;
		border-top: $solid $b-width-6 $additional-color-2;
		border-right: $solid $b-width-6 $color_none;
		border-bottom: $solid $b-width-6 $color_none;
		border-left: $solid $b-width-6 $color_none;
		position: $pos-abs;
		top: 0;
		left: 0;
		animation: cp-round-animate 1s ease-in-out infinite;
	}
}
.cp-balls {
	animation: cp-balls-animate 1s linear infinite;
	&:before {
		border-radius: 50%;
		content: " ";
		width: 24px;
		height: 24px;
		display: inline-block;
		box-sizing: border-box;
		background-color: $additional-color-2;
		position: $pos-abs;
		top: 0;
		left: 0;
		animation: cp-balls-animate-before 1s ease-in-out infinite;
	}
	&:after {
		border-radius: 50%;
		content: " ";
		width: 24px;
		height: 24px;
		display: inline-block;
		box-sizing: border-box;
		background-color: $color_56;
		position: $pos-abs;
		bottom: 0;
		right: 0;
		animation: cp-balls-animate-after 1s ease-in-out infinite;
	}
}
.cp-bubble {
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: inline-block;
	box-sizing: border-box;
	background: $color_84;
	animation: cp-bubble-animate 1s linear infinite;
	&:before {
		border-radius: 50%;
		content: " ";
		width: 24px;
		height: 24px;
		display: inline-block;
		box-sizing: border-box;
		background-color: $color_84;
		position: $pos-abs;
		left: -30px;
		animation: cp-bubble-animate-before 1s ease-in-out infinite;
	}
	&:after {
		border-radius: 50%;
		content: " ";
		width: 24px;
		height: 24px;
		display: inline-block;
		box-sizing: border-box;
		background-color: $color_84;
		position: $pos-abs;
		right: -30px;
		animation: cp-bubble-animate-after 1s ease-in-out infinite;
	}
}
.cp-skeleton {
	border-radius: 50%;
	border-top: $solid $b-width-6 $info;
	border-right: $solid $b-width-6 $color_none;
	border-bottom: $solid $b-width-6 $color_none;
	border-left: $solid $b-width-6 $color_none;
	animation: cp-skeleton-animate 1s linear infinite;
	&:before {
		border-radius: 50%;
		content: " ";
		width: 48px;
		height: 48px;
		display: inline-block;
		box-sizing: border-box;
		border-top: $solid $b-width-6 $color_none;
		border-right: $solid $b-width-6 $color_none;
		border-bottom: $solid $b-width-6 $color_none;
		border-left: $solid $b-width-6 $info;
		position: $pos-abs;
		top: -6px;
		left: -6px;
		transform: rotateZ(-30deg);
	}
	&:after {
		border-radius: 50%;
		content: " ";
		width: 48px;
		height: 48px;
		display: inline-block;
		box-sizing: border-box;
		border-top: $solid $b-width-6 $color_none;
		border-right: $solid $b-width-6 $info;
		border-bottom: $solid $b-width-6 $color_none;
		border-left: $solid $b-width-6 $color_none;
		position: $pos-abs;
		top: -6px;
		right: -6px;
		transform: rotateZ(30deg);
	}
}
.cp-eclipse {
	width: 12px;
	height: 12px;
	display: inline-block;
	box-sizing: border-box;
	border-radius: 50%;
	background: $additional-color-5;
	margin: 12px;
	animation: cp-eclipse-animate 1s ease-out infinite;
	&:before {
		border-radius: 50%;
		content: " ";
		width: 48px;
		height: 48px;
		display: inline-block;
		box-sizing: border-box;
		border-top: $solid $b-width-6 $color_none;
		border-right: $solid $b-width-6 $additional-color-5;
		border-bottom: $solid $b-width-6 $color_none;
		border-left: $solid $b-width-6 $color_none;
		position: $pos-abs;
		top: -18px;
		left: -18px;
	}
	&:after {
		border-radius: 50%;
		content: " ";
		width: 48px;
		height: 48px;
		display: inline-block;
		box-sizing: border-box;
		border-top: $solid $b-width-6 $color_none;
		border-right: $solid $b-width-6 $color_none;
		border-bottom: $solid $b-width-6 $color_none;
		border-left: $solid $b-width-6 $additional-color-5;
		position: $pos-abs;
		top: -18px;
		right: -18px;
	}
}
.cp-boxes {
	&:before {
		width: 24px;
		height: 24px;
		display: inline-block;
		box-sizing: border-box;
		content: " ";
		background: $warning;
		position: $pos-abs;
		top: 12px;
		left: 0;
		animation: cp-boxes-animate-before 1s ease-in-out infinite;
	}
	&:after {
		width: 24px;
		height: 24px;
		display: inline-block;
		box-sizing: border-box;
		content: " ";
		background: $warning;
		position: $pos-abs;
		top: 12px;
		right: 0;
		animation: cp-boxes-animate-after 1s ease-in-out infinite;
	}
}
.cp-morph {
	width: 48px;
	height: 48px;
	display: inline-block;
	box-sizing: border-box;
	background: $color_3;
	animation: cp-morph-animate 1s linear infinite;
}
.cp-heart {
	animation: cp-heart-animate 2s ease-in-out infinite;
	&:before {
		border-radius: 12px 12px $br-0 $br-0;
		content: " ";
		width: 24px;
		height: 35px;
		display: inline-block;
		box-sizing: border-box;
		background-color: $additional-color-3;
		transform: rotate(-45deg);
		position: $pos-abs;
		top: 0;
		left: 8px;
	}
	&:after {
		border-radius: 12px 12px $br-0 $br-0;
		content: " ";
		width: 24px;
		height: 35px;
		display: inline-block;
		box-sizing: border-box;
		background-color: $additional-color-3;
		transform: $rotate-45deg;
		position: $pos-abs;
		top: 0;
		right: 8px;
	}
}
.cp-meter {
	border-radius: 50%;
	border-top: $solid $b-width-6 $color_126;
	border-right: $solid $b-width-6 $color_126;
	border-bottom: $solid $b-width-6 $color_126;
	border-left: $solid $b-width-6 $color_126;
	width: 48px;
	height: 48px;
	display: inline-block;
	box-sizing: border-box;
	&:before {
		border-radius: 3px;
		content: " ";
		width: 6px;
		height: 12px;
		display: inline-block;
		box-sizing: border-box;
		background-color: $color_126;
		position: $pos-abs;
		top: 5px;
		left: 16px;
		transform-origin: center bottom;
		animation: cp-meter-animate-before 1s linear infinite;
	}
}