// Provides any animation or transition type effects for BP elements
// @version 3.0.0

// Fade in hover transition
#buddypress-wrap {

	* {
		transition: opacity 0.1s ease-in-out 0.1s;
	}

	button,
	a.generic-button,
	a.button,
	input[type="submit"],
	input[type="reset"] {
		transition: background 0.1s ease-in-out 0.1s, color 0.1s ease-in-out 0.1s, border-color 0.1s ease-in-out 0.1s;
	}

}

// Historical animation sequence for ajax loading effects.
// Ajax Animations and styles
// scss-lint:disable VendorPrefix
.buddypress-wrap {

	a.loading,
	input.loading {
		-moz-animation: loader-pulsate 0.5s infinite ease-in-out alternate;
		-webkit-animation: loader-pulsate 0.5s infinite ease-in-out alternate;
		animation: loader-pulsate 0.5s infinite ease-in-out alternate;
		border-color: #aaa;
	}

	@-webkit-keyframes loader-pulsate {

		from {
			border-color: $border-color-from;
			-webkit-box-shadow: 0 0 6px $shadow-color-from;
			box-shadow: 0 0 6px $shadow-color-from;
		}

		to {
			border-color: $border-color-to;
			-webkit-box-shadow: 0 0 6px $shadow-color-to;
			box-shadow: 0 0 6px $shadow-color-to;
		}
	}

	@-moz-keyframes loader-pulsate {

		from {
			border-color: $border-color-from;
			-moz-box-shadow: 0 0 6px $shadow-color-from;
			box-shadow: 0 0 6px $shadow-color-from;
		}

		to {
			border-color: $border-color-to;
			-moz-box-shadow: 0 0 6px $shadow-color-to;
			box-shadow: 0 0 6px $shadow-color-to;
		}
	}

	@keyframes loader-pulsate {

		from {
			border-color: $border-color-from;
			-moz-box-shadow: 0 0 6px $shadow-color-from;
			box-shadow: 0 0 6px $shadow-color-from;
		}

		to {
			border-color: $border-color-to;
			-moz-box-shadow: 0 0 6px $shadow-color-to;
			box-shadow: 0 0 6px $shadow-color-to;
		}
	}

	a.loading:hover,
	input.loading:hover {
		color: #777;
	}

}
// scss-lint:enable VendorPrefix

.animate-spin {
	animation: spin 2s infinite linear;
	display: inline-block;
}

@-moz-keyframes spin {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(359deg);
	}
}

@-webkit-keyframes spin {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(359deg);
	}
}

@-o-keyframes spin {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(359deg);
	}
}

@-ms-keyframes spin {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(359deg);
	}
}

@keyframes spin {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(359deg);
	}
}

@-moz-keyframes fade-in-out {

	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fade-in-out {

	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

@-o-keyframes fade-in-out {

	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

@-ms-keyframes fade-in-out {

	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade-in-out {

	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

.bb-loading-bg {
	background-color: #f2f4f5;
	animation: fade-in-out infinite 2s ease;
}

@keyframes backgroundColor {

	0% {
		left: -250%;
	}

	100% {
		left: 250%;
	}

}

@keyframes popIn {

	0% {
		transform: translateY(20%) scale(0.8);
	}

	100% {
		transform: translateY(0) scale(1);
	}

}