/*
 * Icon and hover states for Spotlight's own custom core/button block-style
 * variations (i.e. not WP core's built-in "Fill"/"Outline" styles — see
 * core-button.css for those). One rule block per variation.
 */

/* Republish Article (styles/blocks/button/republish-article.json) */

.wp-block-button.is-style-republish-article .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.35em;
	margin-inline-end: var(--wp--preset--spacing--5);
	background-color: currentcolor;
	-webkit-mask-image: url('../icons/arrow-line-up-right.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-image: url('../icons/arrow-line-up-right.svg');
	mask-repeat: no-repeat;
	mask-size: contain;
}

.wp-block-button.is-style-republish-article .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-600);
	color: var(--wp--preset--color--base);
}

/* Secondary (styles/blocks/button/secondary.json) */

.wp-block-button.is-style-secondary .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.35em;
	margin-inline-start: var(--wp--preset--spacing--5);
	background-color: currentcolor;
	-webkit-mask-image: url('../icons/arrow-right.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-image: url('../icons/arrow-right.svg');
	mask-repeat: no-repeat;
	mask-size: contain;
}

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

/* Text Link (styles/blocks/button/text-link.json) */

.wp-block-button.is-style-text-link .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.35em;
	margin-inline-start: var(--wp--preset--spacing--5);
	background-color: currentcolor;
	-webkit-mask-image: url('../icons/arrow-right.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-image: url('../icons/arrow-right.svg');
	mask-repeat: no-repeat;
	mask-size: contain;
}

/* core-button.css's generic `.wp-block-button .wp-block-button__link:hover`
 * rule out-specifies a plain `.has-*-color` class and turns Text Link
 * into an accent-300 filled pill on hover — background is fixed here
 * with a higher-specificity selector, no !important needed. The text
 * color needs !important though: WordPress's own generated
 * `.has-accent-500-color { color: ...!important }` global-styles
 * utility class always ships !important, so nothing without it can
 * ever override the resting color, confirmed by deleting every
 * competing non-!important rule live and seeing the color still not
 * change. Pending Zared's approval; section headers are the only
 * current use of this style, always with textColor "accent-500".
 */
.wp-block-button.is-style-text-link .wp-block-button__link.has-accent-500-color:hover {
	background-color: transparent;
	color: var(--wp--preset--color--brand-500) !important;
}

/* Dashboard (styles/blocks/button/dashboard.json) */

.wp-block-button.is-style-dashboard .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.35em;
	margin-inline-end: var(--wp--preset--spacing--5);
	background-color: currentcolor;
	-webkit-mask-image: url('../icons/chart-line-up.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-image: url('../icons/chart-line-up.svg');
	mask-repeat: no-repeat;
	mask-size: contain;
}

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