@use '../../../css/dialogs';

#ws-ame-menu-style-settings {
	padding: 0;

	.ws_dialog_buttons {
		flex-shrink: 0;
		flex-grow: 0;

		padding: 8px;
		margin-top: 0;
		border-top: 1px solid #dcdcde;

		background: #fcfcfc;
	}
}

#ws-ame-ms-dialog-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;

}

#ws-ame-ms-dialog-content {
	flex-shrink: 1;
	flex-grow: 1;
	min-height: 100px;
}

#ws-ame-ms-preview-box-container {
	display: inline-block;
	margin: 0 12px;
	
	//Align vertically with WordPress buttons.
	line-height: 28px;      //Old WP.
	vertical-align: center; //WP 7.0+. The old line height doesn't work because buttons are bigger.
}

/*
Position the style dialog relative to the admin menu and the edges of the screen,
overriding the default jQuery UI dialog positioning.

The "ws-ame-menu-style-dialog" class is added by using the "classes" option when
creating the dialog.
 */
.ws-ame-menu-style-dialog {
	@include dialogs.ame-responsive-mega-dialog();
}

.ui-widget-overlay.ame-ms-dialog-overlay {
	//Leave the admin menu unobstructed, but cover the rest of the screen.
	$menuOverlayColor: transparent;
	background-color: transparent;

	--left-offset: calc(var(--ame-ms-menu-width, 160px) + 20px);
	background-image: linear-gradient(
					to right,
					$menuOverlayColor 0,
					$menuOverlayColor var(--left-offset),
					rgba(0, 0, 0, 0.7) var(--left-offset)
	);

	opacity: 1; //Override the default 0.7 opacity.

	//Change the cursor over the admin menu area to indicate that it's not clickable
	//while the style dialog is open.
	&:before {
		content: '';
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: var(--left-offset);
		height: 100%;
		cursor: not-allowed;
	}
}