@media (max-width: 781px) {
	.wp-block-buttons > .wp-block-button:not(.has-custom-width),
	.wp-block-buttons > .wp-block-shortcode > .wp-block-button.is-style-outline--tf {
		width: 100%;
	}
}

/* Shortcode-rendered outline button uses is-style-outline--tf to replicate the WP-generated
   scoped class (is-style-outline--N). Plain selectors (no :root :where) are required so that
   specificity (0,3,0) beats Global Styles (:root :where = 0,0,1) which loads after this file
   and would otherwise reset border-color to transparent. */
.wp-block-button.is-style-outline--tf .wp-block-button__link {
	background: transparent none;
	border-color: currentColor;
	border-width: 2px;
	border-style: solid;
	color: var(--wp--preset--color--accent-3);
	padding-top: calc(0.41em + (1em - 1rem) * 0.4);
	padding-right: clamp(1.1em, 1vw + 1.5em + (1em - 1rem) * 9, 3.5em);
	padding-bottom: calc(0.41em + (1em - 1rem) * 0.4);
	padding-left: clamp(1.1em, 1vw + 1.5em + (1em - 1rem) * 9, 3.5em);
}

.wp-block-button.is-style-outline--tf .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent-3);
}

.wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	text-decoration: underline;

	&:hover {
		text-decoration: none;
	}
}

:root :where(.wp-block-button .wp-block-button__link) :is(img, svg) {
	vertical-align: text-top;
}

:root :where(.wp-block-button.is-style-fill .wp-block-button__link):hover {
	background-color: transparent !important;
	color: var(--wp--preset--color--accent-3);
}

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

.wp-block-button.is-style-fill .wp-block-button__link.has-base-background-color {
	border-color: var(--wp--preset--color--base);

	&:hover {
		color: var(--wp--preset--color--base) !important;
	}
}

.wp-block-button.is-style-fill .wp-block-button__link.has-contrast-background-color {
	border-color: var(--wp--preset--color--contrast);

	&:hover {
		color: var(--wp--preset--color--contrast) !important;
	}
}

.wp-block-button.is-style-outline .wp-block-button__link.has-base-color:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast) !important;
	border-color: var(--wp--preset--color--base);
}
