Button variation element styling in theme.json overridden by outline default style

[peroks]

Issue
When using a core/button outline style with outline.elements.button styling in theme.json, the default outline styles override the outline.elements.button styles. Some of the outline.elements.button properties can be applied directly to the outline object, but not all, i.e. :hover, :focus, etc.

This is an issue, because the only way to apply a hover effect to the default outline button in theme.json is to use the css property, as seen in the Twenty Twenty Five theme. The expected behaviour is that the elements.button styles in theme.json take priority over the default outline styles (not defined in theme.json). Or more general: that theme.json styling take priority over default styling.

The cause for this issue is the order of the generated css. All selectors have a specificity of (0,1,0), but the default outline styles are positioned after the elements styles and thus override them.

This only applies to the outline style. When using a custom style, i.e. variations.custom-outline, element styling works as expected on the frontend (but not in the editor, see below).

How to reproduce
In Twenty Twenty Five theme.json, replace styles.blocks.core/button.variations.outline with

"outline": {
	"elements": {
		"button": {
			"color": {
				"background": "var:preset|color|accent-2"
			},
			":hover": {
				"color": {
					"background": "var:preset|color|accent-3"
				}
			}
		}
	}
}

You will see that the background colors don't apply. They do when using a custom-outline style.

This is what the generated css looks like

:root :where(.is-style-outline--2 .wp-element-button, .is-style-outline--2 .wp-block-button__link) {
	background-color: var(--wp--preset--color--accent-2);
}

:root :where(.is-style-outline--2 .wp-element-button:hover, .is-style-outline--2 .wp-block-button__link:hover) {
	background-color: var(--wp--preset--color--accent-3);
}

:root :where(.wp-block-button.is-style-outline--2 .wp-block-button__link) {
	background: transparent none;
	border-color: currentColor;
	border-width: 2px;
	border-style: solid;
	color: currentColor;
	padding-top: 0.667em;
	padding-right: 1.33em;
	padding-bottom: 0.667em;
	padding-left: 1.33em;
}

You see that the elements styles are created, but are overridden by the default non-theme.json outline styles coming after the element styles.

Due to the use of the css property for hover styling in Twenty Twenty Five theme.json, I guess this issue is kind of known (to some), but I didn't find a corresponding issue and think this is bug which should be fixed.

Additional editor issue
For custom button styles, element styling works as expected on the frontend, but not in the editor. There, the element styles like the background colors don't apply.