Navigation: Try making it possible for themes to have the X overlay t…

…he = icon (#43576)

* Navigation: Try making it possible for themes to have the X overlay the =

* Use wide instead of content width.

packages/block-library/src/navigation/style.scss

@@ -468,8 +468,11 @@ button.wp-block-navigation-item__content {
 		flex-direction: column;
 		background-color: inherit;
 
-		// Use em units to apply padding, so themes can more easily style this in various ways.
-		padding: 2rem;
+		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
+		padding-top: var(--wp--style--root--padding-top, 2rem);
+		padding-right: var(--wp--style--root--padding-right, 2rem);
+		padding-bottom: var(--wp--style--root--padding-bottom, 2rem);
+		padding-left: var(--wp--style--root--padding-left, 2rem);
 
 		// Allow modal to scroll.
 		overflow: auto;
@@ -647,6 +650,11 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-close {
 	width: 100%;
 
+	// Try to inherit wide-width when defined, so the X can align to a top-right aligned menu.
+	max-width: var(--wp--style--global--wide-size, 100%);
+	margin-left: auto;
+	margin-right: auto;
+
 	// This element is not keyboard accessible, and is focusable only using the mouse.
 	// It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen,
 	// where clicking that scrim closes the overlay just like the close button.