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

.wp-block-buttons.is-layout-flex { gap: 24px; }

.wp-block-button .wp-element-button {
	transition: 0.2s all ease-in-out;
	box-shadow: var(--wp--preset--shadow--tlp-button-shadow);
}

.wp-block-button .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--light-grey);
	color: var(--wp--preset--color--dark-grey);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: -3px;
}
.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--primary);
}

.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
--------------------------------------------- */

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

}

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

.is-style-outline-secondary-button .wp-element-button,
.wp-block.is-style-outline-secondary-button .wp-element-button {
	background: transparent;
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: -3px;
	color: var(--wp--preset--color--secondary);
}

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

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

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

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

.is-style-outline-tertiary-button .wp-element-button,
.wp-block.is-style-outline-tertiary-button .wp-element-button {
	background: transparent;
	outline: 3px solid var(--wp--preset--color--tertiary);
	outline-offset: -3px;
	color: var(--wp--preset--color--tertiary);
}

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

/* 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;
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: -3px;
	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);
	box-shadow: none;
	color: var(--wp--preset--color--primary);
}

/* Button - Icon Style */
.wp-block-buttons .wp-block-button .wp-block-button__link:has(> img), .wp-block-buttons .wp-block-button .wp-block-button__link:has(> svg) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.wp-block-buttons .wp-block-button .wp-block-button__link > img, .wp-block-buttons .wp-block-button .wp-block-button__link > svg { min-width: 16px; max-height: 20px; }
.wp-block-buttons .wp-block-button .wp-block-button__link > svg path { fill: currentColor; }
.wp-block-buttons .wp-block-button.is-style-text-button .wp-block-button__link::after { display: none; }