/* wc.ui.menu.bar.ff.scss */
@import 'wc.ui.menu_vars.scss';

$wc-ff-vseparator-pad-top: $wc-ui-menu-item-pad-topbottom * 2;

.menu[role='menubar'] {
	> [role],
	> [role] > .decoratedLabel,
	> [aria-expanded] > button > .decoratedLabel {
		vertical-align: top;// Firefox honours inter-node whitespace even when the XSLT has indent off so this is required to make bar menus look reasonable.
	}

	// need the element qualifier to apply this only to the non-active menu items
	// scss-lint:disable QualifyingElement
	> div[role] {// buttons, even with no border, no margin, no padding still occupy 2px more vertical space in FF than divs
		padding-bottom: calc(#{$wc-ui-menu-item-pad-topbottom} + 1px);
		padding-top: calc(#{$wc-ui-menu-item-pad-topbottom} + 1px);
	}
	// scss-lint:enable QualifyingElement

	[role='separator'][aria-orientation='vertical'] {
		padding-bottom: calc(#{$wc-ff-vseparator-pad-top} + 3px); // I honestly do not know why this works but it does.
		padding-top: 0;
	}

	> [aria-expanded] {
		> button::after {
			position: static;
		}
	}
}

[role='menubar'].bar > [aria-expanded] > button { //top level submenu openers
	padding-bottom: 0;
}

.submenu[aria-expanded='true'] > [role='menu'] {
	// FF cannot correctly calculate the width of a container if it is absolutely positioned
	// scss-lint:disable VendorPrefix
	width: -moz-max-content;
}

/* end wc.ui.menu.bar.ff.scss */
