/*
* Based upon jQuery Mobile Transitions (https://jquerymobile.com)
*
* Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
* Released under the MIT license.
* https://jquery.org/license
*
*/

@mixin visible {
	opacity: 1;
	visibility: visible;
}

@mixin invisible {
	opacity: 0;
	visibility: hidden;
}

%visible {
	@include visible;
}

%invisible {
	@include invisible;
}

.out {
	display: none !important;
}

.csstransitions {
	.out {
		display: block !important;
	}
}

.pop {
	transform-origin: 50% 50%;

	&.in {
		@extend %visible;
		animation-duration: 350ms;
		animation-name: popin;
		transform: scale(1);
		visibility: visible;
	}

	&.out {
		@extend %invisible;
		animation-duration: 100ms;
		animation-name: fadeout;
		visibility: hidden;
	}

	&.reverse {
		&.in {
			animation-name: fadein;
		}

		&.out {
			animation-name: popout;
			transform: scale(.8);
		}
	}
}

@keyframes popin {
	0% {
		@include visible;
		transform: scale(.8);
	}

	100% {
		@include invisible;
		transform: scale(1);
	}
}

@keyframes popout {
	0% {
		@include visible;
		transform: scale(1);
	}

	100% {
		@include invisible;
		transform: scale(.8);
	}
}


.fade {
	transition: all 0 ease 0;

	&.in {
		@extend %visible;
		animation-duration: 225ms;
		animation-name: fadein;
	}

	&.out {
		@extend %invisible;
		animation-duration: 125ms;
		animation-name: fadeout;
		z-index: -1;

		&.noheight {
			animation-name: fadeoutnoheight;
			max-height: 0;
		}
	}

	&.reverse {
		&.in {
			@extend %invisible;
			animation-name: fadeout;
		}

		&.out {
			@extend %visible;
			animation-name: fadein;
		}
	}
}

@keyframes fadein {
	0% {
		@include invisible;
	}

	100% {
		@include visible;
	}
}

@keyframes fadeout {
	0% {
		@include visible;
	}

	100% {
		@include invisible;
	}
}

@keyframes fadeoutnoheight {
	0% {
		@include visible;
		max-height: 100%;
	}

	99.9999% {
		max-height: 100%;
	}

	100% {
		@include invisible;
		max-height: 0;
	}
}

.slide {
	&.out,
	&.in {
		animation-duration: 350ms;
		animation-timing-function: ease-out;
	}

	&.out {
		animation-name: slideouttoleft;
		transform: translateX(-100%);
		visibility: hidden;
	}

	&.in {
		animation-name: slideinfromright;
		transform: translateX(0);
		visibility: visible;
	}

	&.reverse {
		&.out {
			animation-name: slideouttoright;
			transform: translateX(100%);
		}

		&.in {
			animation-name: slideinfromleft;
		}
	}
}

/* keyframes for slidein from sides */
@keyframes slideinfromright {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(0);
	}
}

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

	100% {
		transform: translateX(0);
	}
}

/* keyframes for slideout to sides */
@keyframes slideouttoleft {
	0% {
		transform: translateX(0);
		visibility: visible;
	}

	99% {
		visibility: visible;
	}

	100% {
		transform: translateX(-100%);
		visibility: hidden;
	}
}

@keyframes slideouttoright {
	0% {
		transform: translateX(0);
		visibility: visible;
	}

	99% {
		visibility: visible;
	}

	100% {
		transform: translateX(100%);
		visibility: hidden;
	}
}


.slidefade {
	&.out {
		animation-duration: 225ms;
		animation-name: slideouttoleft;
		transform: translateX(-100%);
	}

	&.in {
		animation-duration: 200ms;
		animation-name: fadein;
		transform: translateX(0);
	}

	&.reverse {
		&.out {
			animation-name: slideouttoright;
			transform: translateX(100%);
		}

	}
}


/* slide up/down */
.slidevert {
	&.out,
	&.in {
		animation-duration: 350ms;
		animation-timing-function: ease-out;
	}

	&.out {
		animation-name: slideouttobottom;
		transform: translateY(100%);
		visibility: hidden;
	}

	&.in {
		animation-name: slideinfromtop;
		transform: translateY(0);
		visibility: visible;
	}

	&.reverse {
		&.out {
			animation-name: slideouttotop;
			transform: translateY(-100%);
		}

		&.in {
			animation-name: slideinfrombottom;
		}
	}
}

@keyframes slideinfromtop {
	0% {
		transform: translateY(-100%);
	}

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

@keyframes slideouttotop {
	0% {
		transform: translateY(0);
		visibility: visible;
	}

	99% {
		visibility: visible;
	}

	100% {
		transform: translateY(-100%);
		visibility: hidden;
	}
}

@keyframes slideinfrombottom {
	0% {
		transform: translateY(100%);
	}

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

@keyframes slideouttobottom {
	0% {
		transform: translateY(0);
		visibility: visible;
	}

	99% {
		visibility: visible;
	}

	100% {
		transform: translateY(100%);
		visibility: hidden;
	}
}