/* Exclude .wp-admin so WordPress/ACF chrome buttons keep core styles.
   The canvas iframe body is not .wp-admin, so block previews still use theme buttons. */
body:not(.wp-admin) .button,
.editor-styles-wrapper .button {
	--button-pad-block: 0.75rem;
	--button-pad-inline: 1.25rem;
	--button-icon-size: 1.125rem;
	--button-min-size: 2.75rem;
	--button-font-size: 1rem;
	--button-icon-gap: 0.5rem;

	align-items: center;
	border: 2px solid transparent;
	border-radius: 0;
	display: inline-flex;
	font-family: var(--font-family-body);
	font-size: var(--button-font-size);
	font-weight: 500;
	gap: var(--button-icon-gap);
	justify-content: center;
	line-height: 1.2;
	min-block-size: var(--button-min-size);
	padding: var(--button-pad-block) var(--button-pad-inline);
	text-decoration: none;
	text-transform: uppercase;
}

body:not(.wp-admin) a.button:hover,
body:not(.wp-admin) a.button:focus,
body:not(.wp-admin) a.button:focus-visible,
.editor-styles-wrapper a.button:hover,
.editor-styles-wrapper a.button:focus,
.editor-styles-wrapper a.button:focus-visible {
	text-decoration: none;
}

body:not(.wp-admin) a.button[data-button-style="filled"]:hover,
body:not(.wp-admin) a.button[data-button-style="filled"]:focus,
body:not(.wp-admin) a.button[data-button-style="filled"]:focus-visible,
.editor-styles-wrapper a.button[data-button-style="filled"]:hover,
.editor-styles-wrapper a.button[data-button-style="filled"]:focus,
.editor-styles-wrapper a.button[data-button-style="filled"]:focus-visible {
	background: var(--button-fill-background);
	border-color: var(--button-fill-background);
	color: var(--button-fill-text);
}

body:not(.wp-admin) a.button[data-button-style="plain"]:hover,
body:not(.wp-admin) a.button[data-button-style="plain"]:focus,
body:not(.wp-admin) a.button[data-button-style="plain"]:focus-visible,
.editor-styles-wrapper a.button[data-button-style="plain"]:hover,
.editor-styles-wrapper a.button[data-button-style="plain"]:focus,
.editor-styles-wrapper a.button[data-button-style="plain"]:focus-visible {
	color: var(--button-plain-text);
}

body:not(.wp-admin) a.button--primary:hover,
body:not(.wp-admin) a.button--primary:focus,
body:not(.wp-admin) a.button--primary:focus-visible,
.editor-styles-wrapper a.button--primary:hover,
.editor-styles-wrapper a.button--primary:focus,
.editor-styles-wrapper a.button--primary:focus-visible {
	background: var(--button-primary-background);
	color: var(--button-primary-text);
}

body:not(.wp-admin) .button__label,
.editor-styles-wrapper .button__label {
	display: inline-block;
}

body:not(.wp-admin) .button__icon,
.editor-styles-wrapper .button__icon {
	block-size: var(--button-icon-size);
	color: inherit;
	display: inline-flex;
	flex: 0 0 auto;
	inline-size: var(--button-icon-size);
	line-height: 0;
}

body:not(.wp-admin) .button__icon svg,
.editor-styles-wrapper .button__icon svg {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

body:not(.wp-admin) .button--primary,
.editor-styles-wrapper .button--primary {
	background: var(--button-primary-background);
	color: var(--button-primary-text);
}

body:not(.wp-admin) .button,
body:not(.wp-admin) .button[data-button-color="auto"],
.editor-styles-wrapper .button,
.editor-styles-wrapper .button[data-button-color="auto"] {
	--button-fill-background: var(--button-auto-fill, var(--color-dark));
	--button-fill-text: var(--button-auto-text, var(--color-white));
	--button-plain-text: var(--button-auto-plain, var(--color-dark));
}

body:not(.wp-admin) .button[data-button-color="white"],
.editor-styles-wrapper .button[data-button-color="white"] {
	--button-fill-background: var(--color-white);
	--button-fill-text: var(--color-dark);
	--button-plain-text: var(--color-white);
}

body:not(.wp-admin) .button[data-button-color="dark"],
.editor-styles-wrapper .button[data-button-color="dark"] {
	--button-fill-background: var(--color-dark);
	--button-fill-text: var(--color-white);
	--button-plain-text: var(--color-dark);
}

body:not(.wp-admin) .button[data-button-style="filled"],
.editor-styles-wrapper .button[data-button-style="filled"] {
	background: var(--button-fill-background);
	border-color: var(--button-fill-background);
	color: var(--button-fill-text);
}

body:not(.wp-admin) .button[data-button-style="plain"],
.editor-styles-wrapper .button[data-button-style="plain"] {
	align-self: center;
	background: transparent;
	block-size: auto;
	border: 0;
	border-radius: 0;
	color: var(--button-plain-text);
	min-block-size: auto;
	padding: 0;
	text-decoration: none;
}

body:not(.wp-admin) .button[data-button-size="small"],
.editor-styles-wrapper .button[data-button-size="small"] {
	--button-font-size: 0.875rem;
}

body:not(.wp-admin) .button[data-button-size="medium"],
.editor-styles-wrapper .button[data-button-size="medium"] {
	--button-font-size: 1rem;
}

body:not(.wp-admin) .button[data-button-size="large"],
.editor-styles-wrapper .button[data-button-size="large"] {
	--button-font-size: clamp(1.125rem, 1.5vw, 1.375rem);
}

body:not(.wp-admin) .button-group,
.editor-styles-wrapper .button-group {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 0.5rem + 2vw, 1.875rem);
}