/* ==================================================
BALAFRE BUTTONS
================================================== */
.balafre-button .wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 18px 52px 18px 18px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition:
	transform 180ms ease,
	opacity 180ms ease;
}

/* ==================================================
COLORS
================================================== */
.balafre-button--primary .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--dark-violet);
	--button-icon-color: var(--wp--preset--color--primary);
}

.balafre-button--yellow .wp-block-button__link {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--dark-violet);
	--button-icon-color: var(--wp--preset--color--yellow);
}

/* ==================================================
ICON CIRCLE
================================================== */
.balafre-button .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--dark-violet);
	transform: translateY(-50%);
}

/* ==================================================
ICON
================================================== */
.balafre-button .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 17px;
	width: 14px;
	height: 14px;
	z-index: 1;
	background: var(--button-icon-color);
	transform: translateY(-50%);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ==================================================
ICON TYPES
================================================== */
.balafre-button--arrow-ne .wp-block-button__link::before {
	-webkit-mask-image: url("../../icons/arrow-up-right.svg");
	mask-image: url("../../icons/arrow-up-right.svg");
}

.balafre-button--arrow-nw .wp-block-button__link::before {
	-webkit-mask-image: url("../../icons/arrow-up-left.svg");
	mask-image: url("../../icons/arrow-up-left.svg");
}

.balafre-button--mail .wp-block-button__link::before {
	-webkit-mask-image: url("../../icons/mail.svg");
	mask-image: url("../../icons/mail.svg");
}

.balafre-button--plus .wp-block-button__link::before {
	-webkit-mask-image: url("../../icons/plus.svg");
	mask-image: url("../../icons/plus.svg");
}

/* ==================================================
HOVER
================================================== */
.balafre-button .wp-block-button__link:hover {
	transform: translateY(-8px);
}