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

.wp-block-button .wp-element-button {
	transition: 0.2s all ease-in-out;
	border: 0;
}
.wp-block-button .wp-block-button__link:hover {
	box-shadow: none;
	/* transform: translateY(-3px); */
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--black);
	outline-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}


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

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--secondary);
}
.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color), 
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--white);
}

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

/* Button - Secondary Style
--------------------------------------------- */

.wp-block-button[class*="is-style-azpro-secondary-"] {
	position: relative;
	display: inline-block;
	transition: all 0.2s ease-in-out;
}

.wp-block-button[class*="is-style-azpro-secondary-"] .wp-element-button,
.wp-block-button[class*="is-style-azpro-secondary-"] .wp-element-button {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
	outline-color: transparent;
	position: relative;
	z-index: 2;
}

.is-style-azpro-secondary-button .wp-element-button,
.wp-block-button.is-style-azpro-secondary-button .wp-element-button {
	clip-path: polygon(10px 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
	padding: 13px 45px;
}
.is-style-azpro-secondary-dark-button .wp-element-button,
.wp-block-button.is-style-azpro-secondary-dark-button .wp-element-button {
	clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
	padding: 13px 45px 13px 35px;
}
.is-style-azpro-secondary-light-button .wp-element-button,
.wp-block-button.is-style-azpro-secondary-light-button .wp-element-button {
	clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
	padding: 13px 45px 13px 35px;
}

.wp-block-button[class*="is-style-azpro-secondary"]::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: var(--wp--preset--color--secondary);
	transition: all 0.2s ease-in-out;
}
.wp-block-button.is-style-azpro-secondary-button::after {
	clip-path: polygon(10px 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.wp-block-button.is-style-azpro-secondary-dark-button::after,
.wp-block-button.is-style-azpro-secondary-light-button::after {
	clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.wp-block-button.is-style-azpro-secondary-dark-button:hover,
.wp-block-button.is-style-azpro-secondary-light-button:hover {
	transform: translateX(5px);
}
.wp-block-button[class*="is-style-azpro-secondary-"]:hover::after {
	transform: translateX(10px);
}

.is-style-azpro-secondary-button:hover .wp-element-button,
.wp-block-button.is-style-azpro-secondary-button:hover .wp-element-button {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--secondary);
}

.is-style-azpro-secondary-dark-button:hover .wp-element-button,
.wp-block-button.is-style-azpro-secondary-dark-button:hover .wp-element-button {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.is-style-azpro-secondary-light-button:hover .wp-element-button,
.wp-block-button.is-style-azpro-secondary-light-button:hover .wp-element-button {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--secondary);
}

/* Button - White Style
--------------------------------------------- */

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

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

.is-style-outline-white-button .wp-element-button,
.wp-block.is-style-outline-white-button .wp-element-button {
	background: transparent;
	color: white;
	outline-color: var(--wp--preset--color--white);
}

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