/* ==========================================================================
   FS Knappar — statisk bas
   ==========================================================================
   Tre stilar med varsin rörelse:

     --fylt    "dyk"        etiketten sjunker undan, en identisk stiger upp
     --kontur  "tidvatten"  en böjd vattenlinje stiger och fyller knappen
     --lenke   "pil"        pilen glider framåt; ingen yta, ingen padding

   Klassnamnen är medvetet .fs-knappar__knapp och inte .fs-knapp. Heron
   definierar redan .fs-knapp globalt i sin egen frontend.css, och ligger
   båda modulerna på samma sida laddas båda filerna. Eget namnrum är enda
   sättet att undvika att de skriver över varandra.

   Färgerna går genom lokala variabler (--fsk-*) i stället för direkt på
   reglerna. Då kan botten-valet och Stil-flikens färgväljare byta färg på
   ett ställe var, i stället för att upprepa varje regel i tre varianter.
   ========================================================================== */

.fs-knappar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fs-space-4);

	/* Ljus botten — knapparna ligger på vitt eller mist. */
	--fsk-fyll:      var(--fs-navy);
	--fsk-fylltekst: var(--fs-paper);
	--fsk-dyk:       var(--fs-accent-light);
	--fsk-kant:      var(--fs-navy);
	--fsk-konturtekst: var(--fs-navy);
	--fsk-tidvann:   var(--fs-lightblue, #8DC7E9);
	--fsk-lenke:     var(--fs-accent-ink);

	/* Etikettens vilotillstånd när tidvattnet har stigit. På ljus botten är
	   texten navy både före och efter — ingen omfärgning behövs. */
	--fsk-tidvann-tekst: var(--fs-navy);

	/* Rörelsens tempo. Tidvattnet är medvetet långsammare än dyket: det ska
	   läsas som vatten, inte som en animation. */
	--fsk-dyk-tid:     0.34s;
	--fsk-tidvann-tid: 0.5s;

	/* Etikettens radhöjd i em, så dyket följer med om typografin ändras i
	   Stil-fliken. 1.3em ger plats åt både å-ringen och underhängen i g och j. */
	--fsk-linje: 1.3em;
}

/* Mörk botten — navy sektion eller foto. Fylld blir vit platta, kontur blir
   vit ram, precis som heron gör det. */
.fs-knappar--mork {
	--fsk-fyll:      var(--fs-paper);
	--fsk-fylltekst: var(--fs-navy);
	--fsk-dyk:       var(--fs-accent-ink);
	--fsk-kant:      var(--fs-paper);
	--fsk-konturtekst: var(--fs-paper);
	--fsk-tidvann:   var(--fs-paper);
	--fsk-lenke:     var(--fs-accent-light);

	/* Här måste texten byta färg: den är vit i vila och står på vitt vatten
	   när tidvattnet har stigit. Se tidsfördröjningen längre ned. */
	--fsk-tidvann-tekst: var(--fs-navy);
}

/* ---- Knappen ----------------------------------------------------------- */

.fs-knappar__knapp {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: var(--fs-space-4) var(--fs-space-6);
	border: 1px solid transparent;
	border-radius: var(--fs-radius);
	font-family: var(--fs-font);
	font-size: var(--fs-text-sm);
	font-weight: var(--fs-weight-semi);
	letter-spacing: var(--fs-ls-ui);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background var(--fs-dur) var(--fs-ease), border-color var(--fs-dur) var(--fs-ease);
}

/* Etiketten ligger över tidvattnet. Utan det här stiger vattnet rakt över
   texten i stället för bakom den. */
.fs-knappar__etikett,
.fs-knappar__dyk {
	position: relative;
	z-index: 1;
}

/* Etikettens låda är exakt lika hög i BÅDA stilarna.

   Dyket kräver en låda med känd höjd att skjuta etiketten ur. Får bara den
   fyllda knappen den höjden blir den några pixlar högre än konturknappen
   bredvid, och två knappar i rad står inte i linje. Höjden sätts därför på
   etiketten själv och gäller alla knappar — dyket lägger bara till sin
   överflödesbeskärning ovanpå. */
.fs-knappar__etikett {
	display: block;
	height: var(--fsk-linje);
	line-height: var(--fsk-linje);
}

/* ---- Fylld: dyket ------------------------------------------------------ */

.fs-knappar__knapp--fylt {
	background: var(--fsk-fyll);
	border-color: var(--fsk-fyll);
	color: var(--fsk-fylltekst);
}

.fs-knappar__dyk {
	display: block;
	height: var(--fsk-linje);
	overflow: hidden;
}

.fs-knappar__dyk .fs-knappar__etikett {
	transition: transform var(--fsk-dyk-tid) cubic-bezier(0.4, 0, 0.15, 1);
}

/* Kopian som stiger upp underifrån. */
.fs-knappar__dyk .fs-knappar__etikett + .fs-knappar__etikett {
	color: var(--fsk-dyk);
}

.fs-knappar__knapp--fylt:hover .fs-knappar__etikett,
.fs-knappar__knapp--fylt:focus-visible .fs-knappar__etikett {
	transform: translateY(calc(-1 * var(--fsk-linje)));
}

/* ---- Kontur: tidvattnet ------------------------------------------------ */

.fs-knappar__knapp--kontur {
	background: transparent;
	border-color: var(--fsk-kant);
	color: var(--fsk-konturtekst);
}

/* Vattenlinjen. Bredare och högre än knappen så att den böjda överkanten
   hinner räta ut sig innan den passerar texten — en rak kant läser som en
   platta som skjuts upp, inte som vatten. */
.fs-knappar__knapp--kontur::before {
	content: '';
	position: absolute;
	top: 100%;
	left: -40%;
	z-index: 0;
	width: 180%;
	height: 240%;
	background: var(--fsk-tidvann);
	border-radius: 44% 46% 0 0 / 26% 28% 0 0;
	transition: top var(--fsk-tidvann-tid) cubic-bezier(0.32, 0.72, 0.28, 1);
}

.fs-knappar__knapp--kontur:hover::before,
.fs-knappar__knapp--kontur:focus-visible::before {
	top: -85%;
}

/* Texten byter färg först när vattnet har passerat den.

   Fördröjningen är halva stigtiden: etiketten sitter lodrätt centrerad, så
   vattnet når den vid ungefär 50 %. Flippar färgen direkt står mörk text på
   mörk botten i en fjärdedels sekund, och det är precis den sortens fel som
   bara syns i rörelse och därför aldrig upptäcks i en granskning av koden.

   På ljus botten är före- och eftervärdet samma navy, så regeln gör inget
   där — den kostar inget att låta gälla båda. */
.fs-knappar__knapp--kontur {
	transition: background var(--fs-dur) var(--fs-ease),
	            border-color var(--fs-dur) var(--fs-ease),
	            color 0.12s linear calc(var(--fsk-tidvann-tid) * 0.52);
}

.fs-knappar__knapp--kontur:hover,
.fs-knappar__knapp--kontur:focus-visible {
	color: var(--fsk-tidvann-tekst);
}

/* ---- Länk: pilen -------------------------------------------------------

   Ingen yta, ingen padding, ingen kant. Den hör hemma i brödtext och i kort,
   där en knapplåda vore för tung — och bredvid de andra två som det tystaste
   av tre steg.

   Understrykningen ligger som box-shadow och inte som text-decoration eller
   border. Skälet är att den varken får flytta texten eller läggas till i
   knappens höjd: etikettlådan är exakt lika hög i alla tre stilarna, och en
   kant under skulle bryta den linjen. Den finns kvar även i vila — färg
   ensam får inte vara det som skiljer en länk från vanlig text. */
.fs-knappar__knapp--lenke {
	padding: 0;
	gap: var(--fs-space-2);
	background: none;
	border-color: transparent;
	color: var(--fsk-lenke);

	/* Pilen glider utanför sin ruta vid hover. Basknappens overflow: hidden
	   behövs för tidvattnet men skulle klippa av pilen här. */
	overflow: visible;
}

/* I vila är strecket nedtonat, vid hover går det upp i full styrka. Tonas
   med color-mix och inte med opacity — opacity på etiketten skulle tona
   texten med. Webbläsare utan color-mix får ett fullt streck i stället för
   inget, vilket är rätt håll att falla åt. */
.fs-knappar__knapp--lenke .fs-knappar__etikett {
	box-shadow: inset 0 -1px 0 currentColor;
	box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 35%, transparent);
	transition: box-shadow var(--fs-dur) var(--fs-ease);
}

.fs-knappar__knapp--lenke:hover .fs-knappar__etikett,
.fs-knappar__knapp--lenke:focus-visible .fs-knappar__etikett {
	box-shadow: inset 0 -1px 0 currentColor;
}

.fs-knappar__pil {
	flex: none;
	transition: transform var(--fsk-dyk-tid) cubic-bezier(0.4, 0, 0.15, 1);
}

.fs-knappar__knapp--lenke:hover .fs-knappar__pil,
.fs-knappar__knapp--lenke:focus-visible .fs-knappar__pil {
	transform: translateX(4px);
}

/* ---- Storlekar --------------------------------------------------------- */

.fs-knappar--liten .fs-knappar__knapp:not(.fs-knappar__knapp--lenke) {
	padding: var(--fs-space-3) var(--fs-space-5);
	font-size: var(--fs-text-xs);
}

.fs-knappar--stor .fs-knappar__knapp:not(.fs-knappar__knapp--lenke) {
	padding: var(--fs-space-5) var(--fs-space-8);
	font-size: var(--fs-text-base);
}

/* Teckenstorleken gäller alla tre stilarna — det är bara lådan länken
   avstår från, inte skalan. */
.fs-knappar--liten .fs-knappar__knapp--lenke { font-size: var(--fs-text-xs); }
.fs-knappar--stor .fs-knappar__knapp--lenke { font-size: var(--fs-text-base); }

/* ---- Fokus ------------------------------------------------------------- */

/* Tokens.css sätter en global fokusring i --fs-focus (#0078AE). Den syns
   knappt mot navy, så på mörk botten byts den mot den ljusa accenten. */
.fs-knappar--mork .fs-knappar__knapp:focus-visible {
	outline: 2px solid var(--fs-accent-light);
	outline-offset: 3px;
}

/* ---- Mobil ------------------------------------------------------------- */

@media (max-width: 600px) {

	.fs-knappar--full-mobil {
		display: grid;
		grid-template-columns: 1fr;
	}

	.fs-knappar--full-mobil .fs-knappar__knapp {
		width: 100%;
	}
}

/* ---- Rörelsekänslighet ------------------------------------------------- */

/* Tokens.css nollar redan alla transitions globalt, men inte fördröjningar.
   Blir kvar en fördröjning på 0,26 s utan stigtid att vänta på står texten
   i fel färg medan vattnet redan är uppe. Regeln upprepas dessutom här så
   modulen är trygg även om den körs utan child-temat. */
@media (prefers-reduced-motion: reduce) {

	.fs-knappar__knapp,
	.fs-knappar__knapp--kontur,
	.fs-knappar__knapp--kontur::before,
	.fs-knappar__dyk .fs-knappar__etikett,
	.fs-knappar__pil {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}