/*
 * Knappar enligt designsystemet (design/designsystem/components/core/Button.jsx).
 * md: 16 px, padding 12/24, vikt 500, inga hörn, minst --hit-min hög, ikon 12 px från texten.
 *
 * ACSS-knapparna (btn--action, btn--outline …) på äldre sidor styrs av ACSS-variabler.
 * Här sätts de variablerna till designsystemets tokens, så att alla knappar ser likadana ut
 * utan att varje knapp byter klass. Tas bort när ACSS är utfasat (plan 005); då bär st-knapp allt.
 */
.brxe-button[class*="btn--"] {
	--btn-font-size: var(--fs-small);
	--btn-padding-block: var(--space-3);
	--btn-padding-inline: var(--space-5);
	--btn-line-height: var(--lh-heading);
	--btn-font-weight: var(--fw-medium);
	--btn-min-width: 0;
	--btn-border-width: 0px;
	--btn-outline-border-width: 2px;
	min-height: var(--hit-min);
	column-gap: var(--space-3);
	border-radius: 0;
}

/* lg (designsystemet 18 px, 15/30): stora CTA:er, t.ex. "Ge stöd" i stödrutan. */
.brxe-button.btn--l:not(.wp-block-button) { /* ACSS sätter font-size direkt på .btn--l */
	--btn-padding-block: var(--space-4);
	--btn-padding-inline: var(--space-6);
	font-size: calc(var(--fs-small) * 1.125);
}

/* Ikon i knapp: i texthöjd (designsystemet 14 px vid 16 px text), centrerad mot versalerna. */
:is(.brxe-button, .st-knapp) > :is(i, svg) {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	font-size: 0.875em;
	line-height: 1;
	translate: 0 -0.05em; /* optisk centrering mot versalerna (radlådan räknar med descender) */
}
:is(.brxe-button, .st-knapp) > i::before {
	display: block;
}

/* Formulärknappar (Fluent Forms): samma mått som md. Färgen sätts i formuläret. */
.frm-fluent-form button.ff-btn.ff-btn-submit {
	min-height: var(--hit-min);
	padding: var(--space-3) var(--space-5);
	border-radius: 0;
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	line-height: var(--lh-heading);
	letter-spacing: 0;
	text-transform: none;
}