/* 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);

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

	> 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);
			@include margin($size: 0);
			font-size: $wc-dialog-header-size;
		}

		> 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 is resizeable AND using desktop css - see wc.ui.dialog.dt.scss
	}
}

@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;
		}

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

// 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;
	}
}
