@import 'components/modals';

uniform-overlay,
edlio-overlay {
	@include justify-content(center);
	@include align-items(center);
	@include flex-flow(row wrap);

	uniform-modal,
	edlio-modal {
		width: 100%;
		height: 100%;
		min-width: ($ui-min-width - ( 2 * $ui-gutter-mobile ));
		max-width: ($ui-max-width - ( 2 * $ui-gutter-desktop ));
		max-height: 100vh;

		overflow: auto;

		background-color: $modal-bg-color;
		color: $modal-text-color;

		// Pagination
		page {
			@include hide;

			height: 100%;

			// For IE10
			width: 100%;

			@include transition(transform, .3s, ease-in);

			&.current {
				@include show(flex);
				@include flex-direction(column);
				@include transform(translateX(0%));

				> * {
					padding: 0 1.618em;
				}

				header {
					@extend %flexbox;
					@include flex-direction(row);
					@include align-items(center);
					@include justify-content(space-between);
					@include flex(0,0,auto);

					background-color: $modal-header-bg-color;

					h1 {
						@include order(0);
						margin: 0 auto;
					}

					svg.icon {
						pointer-events: all;
						cursor: pointer;

						&.back {
							@include order(-1);
						}

						&.close {
							@include order(1);
							margin-left: 0;
						}
					}
				}

				.content {
					padding: {
						top: 1em;
						bottom: 1em;
					}
					overflow: auto;
				}

				footer {
					@extend %flexbox;
					@include flex-direction(row);
					@include justify-content(flex-end);
					@include flex(0,0,auto);
					
					margin-top: auto;
					padding: {
						top: 1em;
						bottom: 1em;
					};
					
					border-top: 2px solid $modal-footer-border-color;

					.button {
						margin-bottom: 0;
						
						&:last-of-type {
							margin-right: 0;
						}

						@include max-screen-size(small) {
							&:not(:last-of-type) {
								margin-right: $modal-footer-button-margin;
							}
						}
					}
				}
			}

			&.past {
				position: absolute;
				@include transform(translateX(-150%));
			}

			&.future {
				position: absolute;
				@include transform(translateX(150%));
			}
		}
		
		@include min-screen-size(medium) {
			max-width: 40em;
			width: auto;
			height: auto;

			border-radius: $default-border-radius;

			&.full {
				max-width: 100vw;
				width: 100%;
				height: 100%;

				border-radius: 0;
			}
		}

		@include max-screen-size(small) {
			position: fixed;
			width: 100vw;
			z-index: 2100;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}

}