/* ============================================================
 * All Buttons and Link Buttons
 * ============================================================ */
.wp-block-button .wp-element-button,
.wp-block-read-more.eco-button,
button.eco-button {
	border-radius: var(--eco-button-border-radius);
	padding: var(--eco-button-padding);
	text-decoration: none;
	font-size: var(--eco-font-size-normal);
	transition: all 0.1s linear;
}

/* ============================================================
 * Aubgerine Buttons and Link Buttons (default)
 * ============================================================ */
.wp-block-button .wp-element-button,
.wp-block-button a.wp-element-button:link,
.wp-block-button a.wp-element-button:visited,
.wp-block-read-more,
a.wp-block-read-more:link,
a.wp-block-read-more:visited,
button.eco-button,
.wp-block-button.eco-button-aubergine .wp-element-button,
.wp-block-button.eco-button-aubergine a.wp-element-button:link,
.wp-block-button.eco-button-aubergine a.wp-element-button:visited,
.wp-block-read-more.eco-button-aubergine,
a.wp-block-read-more.eco-button-aubergine:link,
a.wp-block-read-more.eco-button-aubergine:visited,
button.eco-button-aubergine {
	border: 1px solid var(--wp--preset--color--aubergine);
	background-color: var(--wp--preset--color--aubergine);
	color: #fff;
	text-decoration: none;
}

.wp-block-button a.wp-element-button:hover,
.wp-block-button a.wp-element-button:focus-visible,
a.wp-block-read-more:hover,
a.wp-block-read-more:focus-visible,
button.eco-button:hover,
button.eco-button:focus-visible,
.wp-block-button.eco-button-aubergine a.wp-element-button:hover,
.wp-block-button.eco-button-aubergine a.wp-element-button:focus-visible,
a.wp-block-read-more.eco-button-aubergine:hover,
a.wp-block-read-more.eco-button-aubergine:focus-visible,
button.eco-button-aubergine:hover,
button.eco-button-aubergine:focus-visible {
	border: 1px solid var(--wp--preset--color--tangerine);
	background-color: var(--wp--preset--color--tangerine);
	color: var(--wp--preset--color--aubergine);
	text-decoration: none;
}

.wp-block-button a.wp-element-button:focus-visible,
a.wp-block-read-more:focus-visible,
button.eco-button:focus-visible,
.wp-block-button.eco-button-aubergine a.wp-element-button:focus-visible,
a.wp-block-read-more.eco-button-aubergine:focus-visible,
button.eco-button-aubergine:focus-visible {
	outline: var(--eco-outline);
	outline-offset: var(--eco-outline-offset);
}

.has-steel-background-color .wp-block-button a.wp-element-button:focus-visible,
.has-steel-background-color a.wp-block-read-more:focus-visible,
.has-steel-background-color button.eco-button:focus-visible,
.has-steel-background-color
	.wp-block-button.eco-button-aubergine
	a.wp-element-button:focus-visible,
.has-steel-background-color
	a.wp-block-read-more.eco-button-aubergine:focus-visible,
.has-steel-background-color button.eco-button-aubergine:focus-visible,
.eco-job-posting-latest a.wp-block-read-more:focus-visible {
	outline: var(--eco-outline-width) solid var(--wp--preset--color--aubergine);
}

/* Special case: Aubergine button over tangerine background needs aubergine border on hover */
.wp-block-button.eco-button-aubergine.eco-tangerine-background
	a.wp-element-button:hover,
.wp-block-button.eco-button-aubergine.eco-tangerine-background
	a.wp-element-button:focus-visible,
a.wp-block-read-more.eco-button-aubergine.eco-tangerine-background:hover,
a.wp-block-read-more.eco-button-aubergine.eco-tangerine-background:focus-visible,
button.eco-button-aubergine.eco-tangerine-background:hover,
button.eco-button-aubergine.eco-tangerine-background:focus-visible,
.has-tangerine-background-color
	.wp-block-button.eco-button-aubergine
	a.wp-element-button:hover,
.has-tangerine-background-color
	.wp-block-button.eco-button-aubergine
	a.wp-element-button:focus-visible,
.has-tangerine-background-color a.wp-block-read-more.eco-button-aubergine:hover,
.has-tangerine-background-color
	a.wp-block-read-more.eco-button-aubergine:focus-visible,
.has-tangerine-background-color button.eco-button-aubergine:hover,
.has-tangerine-background-color button.eco-button-aubergine:focus-visible,
.wp-block-button.eco-button-hover-border a.wp-element-button:hover,
.wp-block-button.eco-button-hover-border a.wp-element-button:focus-visible,
button.eco-button-hover-border:hover,
button.eco-button-hover-border:focus-visible {
	background-color: var(--wp--preset--color--tangerine);
	border: 1px solid var(--wp--preset--color--aubergine);
	color: var(--wp--preset--color--aubergine);
	text-decoration: none;
}

/* ============================================================
 * Tangerine-Outlined Buttons and Link Buttons
 * - intended for an abergine background
 * ============================================================ */
.wp-block-button.eco-button-outlined-tangerine .wp-element-button,
.wp-block-button.eco-button-outlined-tangerine a.wp-element-button:link,
.wp-block-button.eco-button-outlined-tangerine a.wp-element-button:visited,
.wp-block-read-more.eco-button-outlined-tangerine,
a.wp-block-read-more.eco-button-outlined-tangerine:link,
a.wp-block-read-more.eco-button-outlined-tangerine:visited,
button.eco-button-outlined-tangerine {
	background-color: var(--wp--preset--color--aubergine);
	border: 1px solid var(--wp--preset--color--tangerine);
	color: var(--wp--preset--color--tangerine);
}

.wp-block-button.eco-button-outlined-tangerine a.wp-element-button:hover,
.wp-block-button.eco-button-outlined-tangerine
	a.wp-element-button:focus-visible,
a.wp-block-read-more.eco-button-outlined-tangerine:hover,
a.wp-block-read-more.eco-button-outlined-tangerine:focus-visible,
button.eco-button-outlined-tangerine:hover,
button.eco-button-outlined-tangerine:focus-visible {
	background-color: var(--wp--preset--color--tangerine);
	color: var(--wp--preset--color--aubergine);
	text-decoration: none;
}

.wp-block-button.eco-button-outlined-tangerine
	a.wp-element-button:focus-visible,
a.wp-block-read-more.eco-button-outlined-tangerine:focus-visible,
button.eco-button-outlined-tangerine:focus-visible {
	outline: var(--eco-outline);
	outline-offset: var(--eco-outline-offset);
}

/* ============================================================
 * Tangerine Buttons and Link Buttons
 * - Not used in latest button guidelines
 * ============================================================ */
.wp-block-button.eco-button-tangerine .wp-element-button,
.wp-block-button.eco-button-tangerine a.wp-element-button:link,
.wp-block-button.eco-button-tangerine a.wp-element-button:visited,
.wp-block-read-more.eco-button-tangerine,
a.wp-block-read-more.eco-button-tangerine:link,
a.wp-block-read-more.eco-button-tangerine:visited,
button.eco-button-tangerine {
	background-color: var(--wp--preset--color--tangerine);
	border: 1px solid var(--wp--preset--color--tangerine);
	color: var(--wp--preset--color--aubergine);
	text-decoration: none;
}

.wp-block-button.eco-button-tangerine a.wp-element-button:hover,
.wp-block-button.eco-button-tangerine a.wp-element-button:focus-visible,
a.wp-block-read-more.eco-button-tangerine:hover,
a.wp-block-read-more.eco-button-tangerine:focus-visible,
button.eco-button-tangerine:hover,
button.eco-button-tangerine:focus-visible {
	background-color: var(--wp--preset--color--aubergine);
	border: 1px solid var(--wp--preset--color--aubergine);
	color: var(--wp--preset--color--tangerine);
	text-decoration: none;
}

.wp-block-button.eco-button-tangerine a.wp-element-button:focus-visible,
a.wp-block-read-more.eco-button-tangerine:focus-visible,
button.eco-button-tangerine:focus-visible {
	outline: var(--eco-outline);
	outline-offset: var(--eco-outline-offset);
}