core/navigation-submenu: Cannot override styles via theme.json

[EldarAgalarov]

Description

1. Gutenberg not seeing that following property is applied:

"core/navigation-submenu": {
	"color": {
		"background": "var(--wp--preset--color--contrast-3)"
	}
}

And continues to apply following WRONG CSS:

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: #fff;
	border: 1px solid #00000026;
}

Instead of this CORRECT CSS:

:where(.wp-block-navigation:not(.has-background)) :where(.wp-block-navigation__submenu-container) {
	background-color: #fff;
	border: 1px solid #00000026;
}

1. ALL DEFAULT CSS RULES MUST HAVE (0,0,0) SPECIFITY TO AVOID SUCH BUGS.
2. ALL THEME.JSON OVERRIDES MUST HAVE HIGHER SPECIFITY THAN BLOCK DEFAULTS.

As navigation-submenu is recursive block then it must apply background color for conatiner (popup menu) too. Container also implements wp-block-navigation-submenu class. Workaround for this bug is following:

"core/navigation-submenu": {
	"border": {
		"style": "none !important",
		"width": "0 !important"
	},
	"color": {
		"background": "var(--wp--preset--color--contrast-3) !important"
	}
}

2. Following styles are not overridable without !important:

"core/navigation-submenu": {
	"elements": {
		"link": {			
			"color": {
				"text": "var(--wp--preset--color--base-2) !important"
			},			
			":hover": {
				"color": {
					"text": "var(--wp--preset--color--base-1) !important"
				}
			}
		}
	}
}