/* wc.ui.menu.bar.scss */
// These styles apply to WMenus of type BAR and FLYOUT
// NOTE: role menuitemradio and menuitemcheckbox can be shorthanded to aria-checked.
@import 'wc.ui.menu_vars.scss';

[role='menubar'] {
	&.flyout {
		display: inline-block;

		> [role],
		> [aria-expanded] > button { //top level items
			padding: $wc-ui-menu-flyout-top-level-item-pad;
		}

		> [role='separator'][aria-orientation='vertical'] {
			padding: $wc-ui-menu-flyout-vseparator-pad;
		}
	}

	&.bar {
		> [role],
		> [aria-expanded] > button {//top level items
			padding: $wc-ui-menu-bar-column-item-pad;
		}

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

	}

	> [role],
	> [role] > .decoratedLabel,
	> [aria-expanded] > button > .decoratedLabel {
		display: inline-block;
		white-space: nowrap;
		width: auto;
	}

	> [role] > .decoratedLabel,
	> [aria-expanded] > button > .decoratedLabel {
		vertical-align: middle;
	}

	> [role='separator'][aria-orientation='vertical'] {
		@include border($pos: left);
		border-bottom: 0 none;
		display: inline;
	}

	[role='menu'] { //sub-menus of a menu bar see wc.ui.menu.barColumn.scss for more
		white-space: nowrap;

		//now for the collision detection...
		&.wc_colsth { //south collision
			left: 100%;

			&.wc_coleast { //collides both south and east
				left: auto;
				right: 100%;
			}
		}

		&.wc_coleast.wc_colwest { //collides both east and west
			max-width: 100%;
		}

		[role='menu'].wc_coleast.wc_colwest { //nested submenus which collide both east and west - this is a design flaw and I refuse to cater for it!
			max-width: none;
		}
	}
}

@import 'wc.ui.panel_vars.scss'; // for the header foreground color

@include respond(mobile) {
	[role='banner'] [role='menubar'] {
		display: inline-block;

		> [role='menuitem']:first-child > button {
			padding: $hgap-small;

			&::before {
				@include make-box;
				content: url('../images/menu.svg');
				vertical-align: middle;
			}

			&::after {
				color: $wc-ui-color-panel-header-foreground;
			}
		}
	}
}
