/* --- PRIMARY BUTTON --- */
.is-style-button-primary, 
.is-style-button-secondary, 
.is-style-button-tertiary{
	background-color: var(--wp--preset--color--hwb-dark);
	border-radius: var(--hwb-button-border-radius);
	min-width: fit-content;
	min-height: 40px!important;
	position: relative;
	overflow: hidden;
}

.is-style-button-primary .wp-block-button__link,
.is-style-button-secondary .wp-block-button__link,
.is-style-button-tertiary .wp-block-button__link{
	color: var(--wp--preset--color--hwb-white);
	position: relative;
	font-size: 16px!important;
	font-weight: 500!important;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	overflow: hidden;
}


.is-style-button-primary::after,
.is-style-button-secondary::after,
.is-style-button-tertiary::after{
	content: '';
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	background-color: var(--wp--preset--color--hwb-secondary-white);
	transform: translateX(-100%);
	transition: transform 0.5s ease-in-out;
	border-radius: var(--hwb-button-border-radius);
	z-index: 1;
}

.is-style-button-primary:hover::after{
	background-color: var(--wp--preset--color--hwb-secondary-white);
	transform: translateX(0%);
}

.is-style-button-primary:hover .wp-block-button__link{
	color: var(--wp--preset--color--hwb-dark)!important;
}


/* --- SECONDARY BUTTON --- */
.is-style-button-secondary{
	background-color: var(--wp--preset--color--hwb-secondary-dark)!important;
}

.is-style-button-secondary:hover::after {
	background-color: var(--wp--preset--color--hwb-secondary-white);
	color: var(--wp--preset--color--hwb-dark)!important;
	transform: translateX(0%);
}
.is-style-button-secondary:hover .wp-block-button__link {
	color: var(--wp--preset--color--hwb-dark)!important;
}

/* --- TERTIARY BUTTON --- */
.is-style-button-tertiary {
	background-color: var(--wp--preset--color--hwb-secondary-dark) !important;
}
.is-style-button-tertiary .wp-block-button__link{
	color: var(--wp--preset--color--hwb-white)!important;
}

.is-style-button-tertiary:hover .wp-block-button__link{
	color: var(--wp--preset--color--hwb-dark)!important;
}

.is-style-button-tertiary:hover::after {
	background-color: var(--wp--preset--color--hwb-secondary-dark);
	transform: translateX(0%);

}