/* wc.ui.dialog.scss */
// The actual dialog. Its position is set on open such that it sits in the middle of the viewport. Margin:auto only
// works in Chrome and Webkit.
@import 'mixins-common';


dialog {
	@include border($width: 0); // oh chrome, you try so hard to annoy me
	@include border-box;
	@include tight-box;
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: $wc-z-index-dialog;

	> [aria-live] { // dialog content container
		@include padded-box;
		height: 100%;
		overflow: auto;
	}

	&[open] {
		@include flex($direction: column);

		> [aria-live] {
			@include flex-grow(1);
		}

		&.wc_max > [aria-live] {
			height: 100%;
		}
	}

	> header,
	> footer { // top and bottom bars of dialog
		@include flex-grow(0);
		@include flex-shrink(0);
	}

	> header {
		@include flex($direction: row-reverse, $wrap: wrap, $justify: space-between, $align-items: center);
		padding: $wc-gap-small 0 $wc-gap-small $wc-gap-small;

		> h1 { // the title
			@include flex-grow(1);
			@if ($wc-dialog-header-size != -1) {
				font-size: $wc-dialog-header-size;
				margin: 0;
			}
		}

		> span { // the header control 'block'
			@include flex-align-self(flex-start);
			line-height: 0;
			margin-right: $wc-gap-small;
		}

		.wc_btn_icon + button {
			margin-left: $wc-gap-small;
		}

		.wc_maxcont {
			display: none;
		}
	}

	> footer {
		display: none; // only show footer if the dialog can be resized.
	}
}

@include respond-not-small {
	dialog {
		left: auto;
		max-height: 100%;
		max-width: 100%;
		min-height: $wc-ui-dialog-min-height;
		min-width: $wc-ui-dialog-min-width;
		right: auto; // chrome again
		top: auto;

		&,
		&[role="alertdialog"] {
			height: auto;
			margin: 0;
			width: auto;
		}

		> footer {
			display: block;
			line-height: 0;
			padding: 0;
			text-align: right;

			button:before {
				padding: $wc-gap-small;
			}
		}

		> header .wc_maxcont {
			display: inline-block;
		}
	}
}

@if ($wc-ui-dialog-use-transitions == 1) {
	// This is only here to make iPads work with the dialogFrame animations (i.e. not work at all).
	@media only screen and (min-width: 1025px) {
		.wc_resizeflow { // keyboard and resize event initiated drag and resize animation
			transition-delay: $wc-ui-dialog-transition-delay;
			transition-duration: $wc-ui-dialog-transition-duration;
			transition-property: left, top, height, width;
			transition-timing-function: ease-in-out;
		}
	}
}

@import 'wc.ui.dialog.color';
@import 'wc.ui.dialogIcons';
