.wp-block-button__link {
	transition: all 100ms ease-in-out;
}

/* .wp-element-button {
	font-size: 16px;
} */

/* Filled button hover: inverts to outline */
.wp-block-button:not(.is-style-outline):not(.has-contrast-color) .wp-block-button__link:hover {
	background-color: transparent;
	color: #000000;
}

/* Outline button — either explicitly set or migrated with has-contrast-color.
   The Mailchimp form's submit is an outline button too; it gets its type,
   padding and border from theme.json via the wp-element-button class that
   sfbbo_mailchimp_button_class() adds. */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.has-contrast-color .wp-block-button__link,
.mc_signup_submit_button {
	background-color: transparent;
	color: #000000 !important;
	border: 1px solid #000000;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.has-contrast-color .wp-block-button__link:hover,
.mc_signup_submit_button:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

/* The Mailchimp submit needs its box and type spelled out rather than inherited
   from theme.json, because the two places it renders are not the same element:
   the front end emits <input type="submit">, while the editor swaps in an
   editable <button> that no server-side filter can reach to add a class to.
   Defining it here keeps both in step — if this leaned on theme.json for the
   front end only, a future change there would move the front end and leave the
   editor behind.

   Values mirror theme.json: `elements.button` for the type and padding, and the
   `base` font-size preset that `styles.blocks.core/button` puts on every
   core/button (its `elements.button` sibling says 12px, which nothing on the
   site actually uses). Keep them in sync if theme.json's button changes.

   The wrapper in the selector outranks two stylesheets that would otherwise
   win: the plugin's editor.css (width: 80%) and wp-admin's forms.css. */
.mc_signup_submit .mc_signup_submit_button {
	width: auto;
	padding: 14px 30px;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	-webkit-appearance: none;
	appearance: none;
}

/* Outline buttons on a dark cover, or any dark/colored full-bleed section
   marked .sfbbo-section-dark, invert to white. */
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover .wp-block-button.has-contrast-color .wp-block-button__link,
.sfbbo-section-dark .wp-block-button.is-style-outline .wp-block-button__link,
.sfbbo-section-dark .wp-block-button.has-contrast-color .wp-block-button__link {
	color: #ffffff !important;
	border-color: #ffffff;
}

.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.has-contrast-color .wp-block-button__link:hover,
.sfbbo-section-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.sfbbo-section-dark .wp-block-button.has-contrast-color .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

/* Filled buttons on a dark/colored section invert to a white fill with black
   text; hover drops the fill and leaves white text on the section color. */
.sfbbo-section-dark .wp-block-button:not(.is-style-outline):not(.has-contrast-color) .wp-block-button__link {
	background-color: #ffffff;
	color: #000000;
	border-color: #ffffff;
}

.sfbbo-section-dark .wp-block-button:not(.is-style-outline):not(.has-contrast-color) .wp-block-button__link:hover {
	background-color: transparent;
	color: #ffffff;
}
