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

// When styling the items set sizes on elements (buttons, links) and visual styles on the role (menuitem etc) as this
// will mean the sub menu opening button is not 'missable' which is the case if sizes, padding etc are set on the role.

// The clickable item in a WSubMenu is the opener button artefact generated from the WDecoratedLabel. We make this fill
// the container so that there is no unclickable edges. This is why we style this button explicitly in many places.
// This is a bit noisy but better than having a click region which is not full-size.
//
// TODO (indefinite): If we ever get rid of SERVER mode WSubMenu we could probably get rid of the opener button as it
// would no longer need to submit. It is handy for other clickable/focusable/disableable goodness though.

// TODO (wishful thinking): Where the WMenu type allows use the menu element in the popup mode and its label/button.


.wc-submenu,
[role='menu'] {
	// We need the important here otherwise we have to do a LOT of overriding of roles.
	// scss-lint:disable ImportantRule
	padding: 0 !important;
}

[role^='menu'] {
	[role],
	.wc-submenu-o {
		padding: $wc-ui-menu-bar-column-item-pad;
	}

	[role='separator'] {
		padding: 0;

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

[role='menubar'] {
	[role],
	.wc-decoratedlabel {
		display: inline-block;
		white-space: nowrap;
	}
}

//this role is any part of a COLUMN menu and submenus of a BAR or FLYOUT
[role='menu'] {
	// Do not make hidden by dfault and show on aria-expanded='true' as this will hide the root of Type.COLUMN.
	&[aria-expanded='false'] {
		// Save some long selector overrides
		// scss-lint:disable ImportantRule
		display: none !important;
	}

	[role^='menu'] & {
		white-space: nowrap;
	}

	[role],
	.wc-submenu-o {
		display: block;
		width: 100%;
	}


	&[aria-expanded='true'] {
		z-index: $z-index-common;

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

	.wc-decoratedlabel {
		display: table-row;
		width: 100%;
	}

	.wc_dlbl_seg {
		display: table-cell;

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

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

// Div menu items need explicit border box.
[role^='menuitem'] {
	@include border-box;
}

.flyout {
	display: inline-block;
}
