/* wc.ui.dialog.dt.scss */
@import 'dialog_vars';

dialog {
	left: auto;
	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;
		text-align: right;
	}

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

	&.wc_dragflow,
	&.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-timing-function: ease-in-out;
	}

	&.wc_dragflow {
		transition-property: left, top;
	}

	&.wc_resizeflow {
		transition-property: height, width;

		&.wc_dragflow {
			transition-property: left, top, height, width;
		}
	}
}

@include respond(small) {
	dialog {
		// override inline CSS.
		// scss-lint:disable ImportantRule
		height: 100% !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;

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

		> header > .wc_maxcont {
			display: none;
		}

		> footer {
			display: none;
		}
	}
}
