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

.wp-block-button .wp-element-button,
.wp-block-button .wp-block-button__link.has-red-background-color {
	background-color: var(--wp--preset--color--red);
	outline-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	border: 0;
	transition: 0.2s all ease-in-out;
}
.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 .wp-block-button__link.has-red-background-color:hover {
	background-color: var(--wp--preset--color--light-red) !important;
	outline-color: var(--wp--preset--color--light-red);
}

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

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

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

/* Secondary - Blue */
.wp-block-button.is-style-fill:has(.has-blue-background-color) .wp-block-button__link,
.wp-block-button:not([class*="is-style-"]):has(.has-blue-background-color) .wp-block-button__link {
	outline-color: var(--wp--preset--color--blue);
}
.wp-block-button.is-style-fill:has(.has-blue-background-color) .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style-"]):has(.has-blue-background-color) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--light-blue) !important;
	outline-color: var(--wp--preset--color--light-blue);
}
.wp-block-button.is-style-outline-hover:has(.has-blue-background-color) .wp-block-button__link {
	background-color: transparent !important;
	outline-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--blue);
}
.wp-block-button.is-style-outline-hover:has(.has-blue-background-color) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--blue) !important;
	outline-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
}

/* Tertiary - Yellow */
.wp-block-button.is-style-fill:has(.has-yellow-background-color) .wp-block-button__link,
.wp-block-button:not([class*="is-style-"]):has(.has-yellow-background-color) .wp-block-button__link {
	outline-color: var(--wp--preset--color--yellow);
}
.wp-block-button.is-style-fill:has(.has-yellow-background-color) .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style-"]):has(.has-yellow-background-color) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--light-yellow) !important;
	outline-color: var(--wp--preset--color--light-yellow);
}
.wp-block-button.is-style-outline-hover:has(.has-yellow-background-color) .wp-block-button__link {
	background-color: transparent !important;
	outline-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--yellow);
}
.wp-block-button.is-style-outline-hover:has(.has-yellow-background-color) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--yellow) !important;
	outline-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--white);
}

/* Button - Icon Button Styles
--------------------------------------------- */
.wp-block-button[class*="is-style-icon"] .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--wp--preset--spacing--x-small) / 1.5);
}
.wp-block-button[class*="is-style-icon"] .wp-block-button__link > svg.tdc-button-icon {
	width: 1.25em;
	height: 1.25em;
	vertical-align: middle;
	fill: currentColor;
	transition: 0.2s all ease-in-out;
}

/* Button sizes
   Set per button in the editor under "Size Options" (blocks/mods/button-size.php).
   Large is the default button styling above / in theme.json.
   Replace these placeholder values with each site's style guide sizes.
--------------------------------------------- */
.wp-block-button.is-size-medium .wp-block-button__link {
	font-size: 0.875em;
	padding: 12px 16px;
}
.wp-block-button.is-size-small .wp-block-button__link {
	font-size: 0.75em;
	padding: 8px 12px;
}