/* 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 'wc.ui.dialog_vars.scss';

dialog {
	background: transparent;
	border: 0 none; // oh chrome, you try so hard to annoy me
	display: none;
	margin: 0;
	padding: 0;
	position: fixed;
	z-index: 20;

	@include respond(mobile) {
		@include border-box;
		height: 98%;
		left: 0;
		margin: 1%;
		top: 0;
		width: 98%;

		> header .wc_maxcont {
			display: none;
		}
	}

	> [aria-live] { // dialog content container
		@include border;
		background-color: $wc-ui-color-global-bg;
		height: 100%;
		// auto breaks in safari: weird!
		// scss-lint:disable VendorPrefix
		// height: -webkit-fit-content;
		// scss-lint:enable VendorPrefix
		overflow: auto;
		padding: $hgap-normal;

		//@include respond(mobile) {
		//	height: 100%;
		//}

		&[aria-busy='true'] { // override usual transparency of busy elements because that's just wrong with a dialog's content.
			//scss-lint:disable ImportantRule
			background-color: $wc-ui-color-global-bg !important;
			//scss-lint:enable ImportantRule
		}
	}

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

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

	> header,
	> footer { // top and bottom bars of dialog
		background-color: $wc-ui-color-dialog-head-bg;
	}

	> 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);
			color: $wc-ui-color-dialog-head-fg;
			font-size: 1em;
			margin: 0;
		}

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

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

// dialog close control
// NOTE: for resize handle and max/restore control see wc.ui.resizeable.scss.
.wc_dialog_close.wc_btn_nada {
	@include background-image($url: '../images/dialog-close-sprite.png', $height: cover, $x: 0, $y: 0);
	@include make-box;
	&:focus,
	&:hover {
		background-position: 100% 0;
	}
}
/* end wc.ui.dialog.scss */
