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

.wp-block-button.is-style-outline .wp-block-button__link,
.moreless-button {
	border: none;
	background-color: transparent;
	color: var(--wp--preset--color--foreground-1);
	outline: 2px solid currentColor;
	outline-offset: -2px;
	padding-top: 0.5rem;
	padding-right: clamp(1.25rem, 1.5vw, 3rem);
	padding-bottom: 0.4rem;
	padding-left: clamp(1.25rem, 1.5vw, 3rem);
	border-radius: 100px;
	text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.moreless-button:hover {
	color: var(--wp--preset--color--background-1) !important;
	outline-color: var(--wp--preset--color--foreground-1);
	background-color: var(--wp--preset--color--foreground-1);
	text-decoration: none!important;
}

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

.is-style-button-secondary .wp-element-button,
.wp-block.is-style-button-secondary .wp-element-button {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	background-color: var(--wp--preset--color--secondary);

}

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

/* Button - Tertiary Style
--------------------------------------------- */

.is-style-button-tertiary .wp-element-button,
.wp-block.is-style-button-tertiary .wp-element-button {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	background-color: var(--wp--preset--color--tertiary);

}

.is-style-button-tertiary:hover .wp-element-button,
.wp-block.is-style-button-tertiary:hover .wp-element-button {
	background: var(--wp--preset--color--foreground-1);
	color: var(--wp--preset--color--background-1);
}


/* Button - Foreground
--------------------------------------------- */
.is-style-button-foreground .wp-element-button,
.wp-block.is-style-button-foreground .wp-element-button {
	color: var(--wp--preset--color--background-1);
	font-size: var(--wp--preset--font-size--small);
	background-color: var(--wp--preset--color--foreground-1);

}

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

/* Button - Background
--------------------------------------------- */
.is-style-button-background .wp-element-button,
.wp-block.is-style-button-background .wp-element-button {
	color: var(--wp--preset--color--foreground-1);
	font-size: var(--wp--preset--font-size--small);
	background-color: var(--wp--preset--color--background-1);

}

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

/* Button - With Background Section
--------------------------------------------- */

.has-foreground-background-color.has-background .is-style-button a:hover,
.has-foreground-background-color.has-background .is-style-button-primary a:hover,
.has-foreground-background-color.has-background .is-style-button-secondary a:hover,
.has-foreground-background-color.has-background .is-style-button-tertiary a:hover {
	background-color: var(--wp--preset--color--background-1);
	color: var(--wp--preset--color--foreground-1);
}

.wp-block-button svg {
	margin-right: var(--wp--preset--spacing--x-small);
}