// COMPONENT : Modals

// Initially hide modal before overlay appears
uniform-modal,
edlio-modal {
	display: none;
}

uniform-overlay,
edlio-overlay {
	@extend %flexbox;
	@include flex(1,0,100%);

	uniform-modal,
	edlio-modal {
		@extend %flexbox;
		@include flex(0,1,auto);

		position: relative;
		z-index: $z-index-modal;

		opacity: 0;

		&.ios-modal {
		  position: fixed;
		  max-height: 100% !important;
		  width: 100% !important;
		}

		// Animation States
		&.transition-in {
			opacity: 1;

			@include transition(all, .3s, cubic-bezier(0.44, 0.01, 0.37, 0.99));
			@include transform(translate3d(0,0,0) scale(1.0));
		}

		&.transition-out {
			opacity: 0;

			@include transition(all, .3s, cubic-bezier(0.44, 0.01, 0.37, 0.99));
			@include transform(translate3d(0,-25%,0) scale(0.2));
		}
	}
}