/*
 * Common animations as mixins
 */

/* slide in */

._slideIn(@startPct: -100%, @animationTime: 0.5s) {
	transform: translateX(@startPct);
	animation: slide-in @animationTime forwards;
}

@keyframes slide-in {
	100% { transform: translateX(0%); }
}

/* slide up */

._slideUp(@animationTime: 0.5s) {
	transform-origin: 50% 50%;
	animation: slide-up-fade-in @animationTime forwards;
}

@keyframes slide-up-fade-in {
    0% {
        opacity: 0;
        transform: translate(0px, 40px);
    }
    100% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
}

/* fade in */

._fadeIn(@animationTime: 0.5s, @animationCurve: linear) {
	animation: fade-in @animationTime @animationCurve 1;
}

@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* fade out */

._fadeOut(@animationTime: 0.5s) {
	animation: fade-out @animationTime linear;
}

@keyframes fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* move up */

._moveUp(@animationTime: 0.3s, @animationCurve: @primaryAnimationCurve) {
	animation: move-up @animationTime @animationCurve 1;
}

@keyframes move-up {
	from { bottom: 90%; }
	to { bottom: 100%; }
}
