@use "../../css/wp-admin-colors";
@use "../../css/dialogs";

.ws_container .ws_subtype_heading_flag {
	background-image: url('heading.png');
}

.ame-mh-toggle-preview-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2px;
}

.ame-mh-toggle-preview .ame-mh-toggle {
	background: wp-admin-colors.wpColor(gray-0);
	min-height: 18px;
}

.ame-heading-preset-container {
	background: var(--ame-mh-detected-menu-background, #1d2327);

	max-width: 180px; //Default menu width is 160px, but we allow a bit more for presets.

	a {
		color: var(--ame-mh-detected-menu-color, #f0f0f1);

		display: block;
		line-height: 1.3; //Chosen to match the default line height setting for menu item links.
		font-size: 14px; //Default font size for top level admin menu items.
		text-decoration: none;

		&:focus, &:active {
			box-shadow: none;
		}
	}

	.wp-menu-name {
		padding: 8px 8px 8px 36px;
	}
}

.ame-mh-preset-previews {
	--ame-rcg-min-item-width: 200px;

	//The presets have slightly different heights due to different vertical padding and borders,
	//so let's set a minimum height on the their parents to make the card labels line up better.
	.ame-radio-card-children {
		min-height: 36px;
	}

	//Give the preset containers room to expand horizontally (up to their max width).
	.ame-radio-card-body {
		flex-grow: 1;
	}
}

.ws-ame-menu-heading-dialog {
	@include dialogs.ame-responsive-mega-dialog();

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

		padding: 8px;
		margin-top: 0;
		border-top: 1px solid wp-admin-colors.wpColor(gray-5);

		background: #fcfcfc;
	}
}

#ws-ame-menu-heading-settings-next {
	padding: 0;
}

#ws-ame-mh-dialog-content {
	flex-grow: 1;
	flex-shrink: 1;
	min-height: 100px; //Counterintuitively, must be set to avoid the height growing without limit.
}

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