/* 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 'dialog_vars';

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: $z-index-dialog;

	&[role="alertdialog"] {
		height: 98%;
		margin: 1%;
		width: 98%;
	}

	> [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: $hgap-small;
		}
	}

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

		> h1 { // the title
			@include flex-grow(1);
			@include margin($size: 0);
			font-size: 1rem;
		}

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

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

		.wc_maxcont {
			display: none;
		}
	}

	> footer {
		display: none; // only show footer is resizeable AND using desktop css - see wc.ui.dialog.dt.scss
	}
}
