/* Button - Fill Style
--------------------------------------------- */

.wp-block-button .wp-element-button {
	background-color: var(--wp--preset--color--primary);
	outline-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 0;
	transition: var(--tfp--preset--transition);
}
.wp-block-button .wp-block-button__link:hover {
	box-shadow: none;
	/* transform: translateY(-3px); */
}
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--dark-grey);
	outline-color: var(--wp--preset--color--dark-grey);
}

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

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

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

/* Button Blue Dark/Light
--------------------------------------------- */
.wp-block-button[class*="is-style-blue"] .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-image: var(--tfp--preset--icon--chevron--white);
	background-position: left 30px center;
	background-repeat: no-repeat;
	background-size: 14px 18px;
	color: var(--wp--preset--color--white);
}
.wp-block-button[class*="is-style-blue"] .wp-element-button::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 18px;
	background-image: var(--tfp--preset--icon--chevron--white);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px 18px;
	transition: var(--tfp--preset--transition);
	opacity: 0;
}
.wp-block-button[class*="is-style-blue"]:hover .wp-element-button::before {
	margin-left: 11px;
	opacity: 0.5;
}

.wp-block-button.is-style-blue-dark-button .wp-element-button {
	background-color: var(--wp--preset--color--secondary);
	outline-color: var(--wp--preset--color--secondary);
}
.wp-block-button.is-style-blue-dark-button:hover .wp-element-button {
	background-color: var(--wp--preset--color--text-color);
	outline-color: var(--wp--preset--color--text-color);
}

.wp-block-button.is-style-blue-light-button .wp-element-button {
	background-color: var(--wp--preset--color--primary);
	outline-color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-blue-light-button:hover .wp-element-button {
	background-color: #0067A1;
	outline-color: #0067A1;
}


/* Button Learn More Dark/Light BG
--------------------------------------------- */
.wp-block-button[class*="is-style-learn-more"] {
	position: relative;
	/* overflow: hidden; */
}
.wp-block-button[class*="is-style-learn-more"] .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: transparent;
	outline: none;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	padding: 6px 13px;
	padding-left: 32px;
	position: relative;
	z-index: 2;
}
.wp-block-button[class*="is-style-learn-more"] .wp-element-button::before {
	content: "";
	display: block;
	background-color: var(--wp--preset--color--primary);
	background-image: var(--tfp--preset--icon--chevron--white);
	background-position: 6px 7px;
	background-repeat: no-repeat;
	background-size: 14px 18px;
	border-radius: 2px;
	width: 25px;
	height: 33px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	transition: var(--tfp--preset--transition);
}
.wp-block-button[class*="is-style-learn-more"]:hover .wp-element-button {
	color: var(--wp--preset--color--white);
	padding-left: 42px;
}
.wp-block-button[class*="is-style-learn-more"]:hover .wp-element-button::before {
	width: 100%;
}
.wp-block-button[class*="is-style-learn-more"] .wp-element-button::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 18px;
	background-image: var(--tfp--preset--icon--chevron--white);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px 18px;
	transition: var(--tfp--preset--transition);
	position: absolute;
	top: 7px;
	left: 6px;
	opacity: 0;
	z-index: 2;
}
.wp-block-button[class*="is-style-learn-more"]:hover .wp-element-button::after {
	transform: translateX(11px);
	opacity: 0.5;
}
.wp-block-button.is-style-learn-more-dark-button .wp-element-button {
	color: var(--wp--preset--color--white);
}