/* Button - Outline (Contrast / Light) Styles
   Theme-owned outlines (slugs: button-outline, button-outline-light). They use
   their own classes so that WordPress core's built-in `.is-style-outline`
   padding never applies — that lets them inherit the global button padding
   (Styles > Blocks > Button > Padding) exactly like every other button style.
   The text/outline color of each is set in its
   styles/blocks/button/button-outline*.json partial; the hover is shared.
--------------------------------------------- */

.wp-block-button.is-style-button-outline .wp-block-button__link,
.wp-block-button.is-style-button-outline-light .wp-block-button__link {
	border: none;
	background-color: transparent;
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.wp-block-button.is-style-button-outline .wp-block-button__link:hover,
.wp-block-button.is-style-button-outline-light .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
	outline-color: var(--wp--preset--color--main);
}

/* Button - Outline Brand Style
--------------------------------------------- */

.wp-block-button.is-style-button-outline-brand .wp-block-button__link {
	border: none;
	background-color: transparent;
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Button - Transition
--------------------------------------------- */

.wp-block-button.is-style-button-outline-brand .wp-block-button__link,
.wp-block-button.is-style-button-brand .wp-block-button__link,
.wp-block-button.is-style-button-brand-alt .wp-block-button__link,
.wp-block-button.is-style-button-dark .wp-block-button__link,
.wp-block-button.is-style-button-light .wp-block-button__link,
.wp-block-button.is-style-secondary-button .wp-block-button__link,
.wp-block-button.is-style-button-outline .wp-block-button__link,
.wp-block-button.is-style-button-outline-light .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Button - Outline Brand Hover
--------------------------------------------- */

.wp-block-button.is-style-button-outline-brand .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	outline-color: var(--wp--preset--color--primary);
}

/* Button - Brand Hover
--------------------------------------------- */

.wp-block-button.is-style-button-brand .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-alt-accent);
}

/* Button - Brand Alt Hover
--------------------------------------------- */

.wp-block-button.is-style-button-brand-alt .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-alt-accent);
	color: var(--wp--preset--color--primary-alt);
}

/* Button - Dark Hover
--------------------------------------------- */

.wp-block-button.is-style-button-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-alt-accent);
}

/* Button - Light Hover
--------------------------------------------- */

.wp-block-button.is-style-button-light .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}

/* Button - Tint Hover
--------------------------------------------- */

.wp-block-button.is-style-secondary-button .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--border-light);
}

/* Button - Icons
--------------------------------------------- */

.wp-block-button[class*="has-icon-"] .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 0.4em;
	margin-top: -2px;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.wp-block-button.has-icon-arrow-right .wp-block-button__link::after {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

.wp-block-button.has-icon-external .wp-block-button__link::after {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>");
}

.wp-block-button.has-icon-download .wp-block-button__link::after {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
}

.wp-block-button.has-icon-plus .wp-block-button__link::after {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}

.wp-block-button.has-icon-check .wp-block-button__link::after {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* Straight horizontal arrow */
.wp-block-button.has-icon-arrow-long-right .wp-block-button__link::after {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
}

/* North-east arrow */
.wp-block-button.has-icon-arrow-up-right .wp-block-button__link::after {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>");
}

/* Play */
.wp-block-button.has-icon-play .wp-block-button__link::after {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='5 3 19 12 5 21 5 3'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='5 3 19 12 5 21 5 3'/></svg>");
}

/* Star */
.wp-block-button.has-icon-star .wp-block-button__link::after {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
}

/* Mail */
.wp-block-button.has-icon-mail .wp-block-button__link::after {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><polyline points='2 6 12 13 22 6'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><polyline points='2 6 12 13 22 6'/></svg>");
}