/* Button - Outline Style
--------------------------------------------- */
.wp-block-button.is-style-outline .wp-element-button:where(
	:hover,
	:focus
):not(:active) {
	--wp--custom--button--outline--border--color: var(--wp--custom--button--outline--hover--border--color);
	--wp--custom--button--outline--color--text: var(--wp--custom--button--outline--hover--color--text);
	--wp--custom--button--outline--color--background: var(--wp--custom--button--outline--hover--color--background);
	--wp--custom--button--primary--hover--color--background: var(--wp--custom--button--outline--hover--color--background);
	--wp--custom--button--primary--hover--color--text: var(--wp--custom--button--outline--hover--color--text);
	--wp--custom--button--primary--hover--border--color: var(--wp--custom--button--outline--hover--border--color);
}
.wp-block-button.is-style-outline .wp-element-button:active {
	--wp--custom--button--outline--border--color: var(--wp--custom--button--outline--active--border--color);
	--wp--custom--button--outline--color--text: var(--wp--custom--button--outline--active--color--text);
	--wp--custom--button--outline--color--background: var(--wp--custom--button--outline--active--color--background);
	opacity: 0.5;
}

.wp-element-button {
	&, span {
		transition: var(--wp--custom--transition--default);
	}
}

.has-secondary-background-color,
.has-contrast-background-color {
	--wp--custom--button--outline--hover--color--background: var(--wp--preset--color--blue);
}

/* Button - Hover Style
 * Built to allow users to adjust the button style
--------------------------------------------- */
.wp-block-button:not(.is-style-outline) > a.wp-element-button,
.block-editor .wp-block-button:not(.is-style-outline) > div.wp-element-button {
	display: flex;
	justify-content: center;
	span {
		display: flex;
	}

	/* Regular styles */
	&:not(:hover, :focus, :active) {
		color: var(--wp--preset--color--primary);
		background-color: currentColor;
		border-color: currentColor;

		& span {
			color: white;
		}
	}

	/* Hover styles */
	&:where(:hover, :focus):not(:active) {
		background-color: currentColor;
		& span {
			color: inherit;
		}
	}
	
	/* Active styles */
	&:active {
		/* background-color: currentColor; */

		& span {
			color: rgba(255, 255, 255, 0.5);
		}
	}
}
/** Add gradient so editors can see their buttons */
.block-editor .wp-block-button:not(.is-style-outline) > div.wp-element-button {
	background-image: var(--wp--custom--button--primary--hover--color--gradient);
}

/**
 * Icons
 */
/* .block-editor .wp-element-button.has-icon, */
.wp-element-button.has-icon {
	--mask-image: none;
	display: flex;
	flex-direction: row;

	&, span {
		gap: var(--wp--preset--spacing--07);
	}
	
	&.icon-position-start::before,
	&.icon-position-end::after,
	.wp-block-button:not(.is-style-outline) &.icon-position-start span::before,
	.wp-block-button:not(.is-style-outline) &.icon-position-end span::after {
		display: block;
		content: "";
		height: 24px;
		width: 24px;
		background-color: currentColor;
		mask-position: center;
		mask-size: contain;
		mask-image: var(--mask-image);
	}
	.wp-block-button:not(.is-style-outline) & {

		&.icon-position-start::before,
		&.icon-position-end::after {
			display: none;
		}

	}
	
	&.has-sitecare-icon {
		--mask-image: url(../icons/sitecare.svg);
	}
	&.has-navigate-next-icon {
		--mask-image: url(../icons/navigate-next.svg);
	}
	&.has-call-icon {
		--mask-image: url(../icons/call.svg);
	}
	&.has-location-icon {
		--mask-image: url(../icons/location.svg);
	}
	&.has-mail-icon {
		--mask-image: url(../icons/mail.svg);
	}
	&.has-arrow-forward-icon {
		--mask-image: url(../icons/arrow-forward.svg);
	}
}