/**
 * TEAB Moduler — Knapp.
 *
 * Alla knappvarianter i ett ställe. Typsnitt ärvs från temat (Archivo globalt)
 * så ingen extra fontladdning sker. Brand-grön som standard, skarpa hörn (2px)
 * och en diskret pil-mikrointeraktion. Återhållet = "stort, seriöst, stilrent".
 */

.teab-btn-wrap { display: block; }
.teab-btn-wrap--left   { text-align: left; }
.teab-btn-wrap--center { text-align: center; }
.teab-btn-wrap--right  { text-align: right; }

.teab-btn {
	/* Brand-tokens – scopade till knappen så de inte läcker globalt. */
	--teab-green-700: #006420;
	--teab-green-800: #004E19;
	--teab-green-bright: #34AC5C;
	/* ink/paper följer temat så ghost-knappen syns i både ljust och mörkt läge. */
	--teab-ink: var(--teab-text, #14201A);
	--teab-paper: var(--teab-bg, #F8FBF9);
	--teab-easing: cubic-bezier(.2, .6, .2, 1);

	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: background .25s var(--teab-easing), color .25s var(--teab-easing), border-color .25s var(--teab-easing);
}

.teab-btn:focus-visible {
	outline: 2px solid var(--teab-green-bright);
	outline-offset: 2px;
}

/* Pilen flyttar sig diskret på hover – signalerar riktning/framåt. */
.teab-btn__arrow { transition: transform .25s var(--teab-easing); }
.teab-btn:hover .teab-btn__arrow { transform: translateX(4px); }

/* ---- Primär: grön fyllning (700 = säker WCAG AA mot vit text) ---- */
.teab-btn--primary { background: var(--teab-green-700); color: #fff; }
.teab-btn--primary:hover { background: var(--teab-green-800); color: #fff; }

/* ---- Ghost – mörk kant (för ljus yta) ---- */
.teab-btn--ghost-dark { background: transparent; color: var(--teab-ink); border-color: var(--teab-ink); }
.teab-btn--ghost-dark:hover { background: var(--teab-ink); color: var(--teab-paper); }

/* ---- Ghost – ljus kant (för mörkt band) ---- */
.teab-btn--ghost-light { background: transparent; color: #ECECEC; border-color: rgba(236, 236, 236, .45); }
.teab-btn--ghost-light:hover { background: rgba(236, 236, 236, .08); border-color: #ECECEC; color: #ECECEC; }

/* ---- Svep: grön fyllning sveper in från vänster (för ljus yta) ---- */
.teab-btn--wipe { background: transparent; color: var(--teab-ink); border-color: var(--teab-ink); z-index: 0; }
.teab-btn--wipe::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--teab-green-700);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--teab-easing);
}
.teab-btn--wipe:hover { color: #fff; border-color: var(--teab-green-700); }
.teab-btn--wipe:hover::before { transform: scaleX(1); }

/* ---- Text-länk: ritad underline-wipe. Två färgvarianter (ljus/mörk yta). ---- */
.teab-btn--link,
.teab-btn--link-light {
	padding: 4px 0;
	border: none;
	border-radius: 0;
	background-color: transparent;
	overflow: visible;
	/* currentColor-streck som ritas in vid hover. */
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .3s var(--teab-easing), color .25s var(--teab-easing);
}
.teab-btn--link { color: var(--teab-green-700); }
.teab-btn--link-light { color: var(--teab-green-bright); }
.teab-btn--link:hover,
.teab-btn--link-light:hover { background-size: 100% 1.5px; }

@media (prefers-reduced-motion: reduce) {
	.teab-btn,
	.teab-btn__arrow,
	.teab-btn--wipe::before { transition: none; }
}