/* Buttons of the RUB web components (design/README.md): primary (filled)
   and secondary (outlined, block style "Outline"). Colours of the filled
   button and its hover and active states: theme.json. Part of the RUB Chair
   theme. */

/* Text and an arrow on the right (Lucide arrow-right, 8px apart), as the
   buttons of the RUB web components: 48px high, text UI Headline 5
   (15/24 semi-bold). The arrow is a ::before moved to the end, because
   ::after already stretches some buttons' links over their card. */
.wp-block-button__link,
.wp-element-button {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
	line-height: 1.5rem;
}

.wp-block-button__link::before,
.rub-content .wp-element-button::before {
	background-color: currentColor;
	content: "";
	flex: none;
	height: 1.25rem;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	order: 1;
	width: 1.25rem;
}

/* Outlined button: RUB Blau on a light tint under the mouse and when pressed
   (tokens state/secondary/hover and active), instead of turning dark blue. */
.wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus),
.rub-link-area .wp-block-button__link:is(:hover, :focus) {
	background-color: rgb(0 53 96 / 8%);
	color: var(--rub-blue);
}

.wp-block-button.is-style-outline > .wp-block-button__link:active,
.rub-link-area .wp-block-button__link:active {
	background-color: rgb(0 53 96 / 20%);
	color: var(--rub-blue);
}