/* wc.ui.menu.scss */
@import 'mixins-common';
// Structural styles common to all menus.

.wc-menuitem,
.wc-submenu {
	width: 100%;

	.wc_menu_bar > & {
		display: inline-block;
		// vertical-align: text-top;
		white-space: nowrap;
		width: auto;
	}
}

.wc-menuitem,
.wc-submenu-o {
	padding: $wc-menu-bar-column-item-pad;

	.wc-decoratedlabel {
		display: inline-table; // this is so we can hold an icon on WMenuItem
		width: 100%;
	}

	.wc_dlbl_seg {
		display: table-cell;

		+ .wc_dlbl_seg {
			padding-left: $wc-gap-small;
		}
	}

	.wc-labelbody {
		width: 100%;
	}
}

.wc-menuitem {
	// 'div' menu items need explicit border box, buttons have it by default.
	@include border-box;
	display: block;
	vertical-align: bottom;

	&.wc-icon-before,
	&.wc-icon-after {
		.wc-decoratedlabel {
			width: calc(100% - $wc-icon-normal - $wc-gap-small);
		}
	}
}

// the hamburger icon. This is here to override wc-submenu-o above.
.wc_hbgr {
	padding: $wc-gap-small;
}

.wc-menu [role='separator'] {
	padding: 0;

	&[aria-orientation='vertical'] {
		padding: $wc-menu-bar-vseparator-pad;
		vertical-align: bottom;
	}
}

.wc_submenucontent {
	display: none;
	white-space: nowrap;

	&[aria-expanded='true'] {
		display: block;
	}

	&[aria-busy='true'] {
		min-height: $wc-icon-normal;
	}

	.wc-menu-type-tree & {
		white-space: normal;
	}

	.wc_menu_bar &,
	.wc-menu-type-column & {
		z-index: $wc-z-index-common;

		dialog & {
			z-index: $wc-z-index-common-in-dialog;
		}
	}
}

.wc_closesubmenu {
	display: none;
}
