/*
 * Wiederverwendbarer Checkbox-Haken: quadratische SVG-Box mit
 * einzeichnendem Tick (stroke-dashoffset-Animation). Urspruenglich aus der
 * Beitrittserklaerung (pages/service/beitrittserklaerung-online-assistent),
 * dort als Uiverse.io-Vorlage mit an das TVA-Design angepassten Farben
 * eingefuehrt. Diese Datei ist die gemeinsame Quelle fuer beide Seiten -
 * Wortlaut/Farben/Animation nur an EINER Stelle aendern.
 *
 * Legt bewusst nur das AUSSEHEN der Box/des Hakens fest, nicht WANN er
 * angehakt erscheint - das entscheidet jede einbindende Seite selbst (z.B.
 * ":checked + .terms-label" bei einer echten Formular-Checkbox, oder eine
 * JS-verwaltete ".is-selected"-Klasse bei einer Chip-Auswahlliste). Dafuer
 * reicht dort jeweils eine Regel, die am Ende .checkbox-box/.checkbox-tick
 * auf stroke-dashoffset: 0 setzt.
 */

.checkbox-svg {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
}

.checkbox-box {
	fill: color-mix(in srgb, var(--ink) 8%, transparent);
	stroke: var(--accent-solid);
	stroke-dasharray: 800;
	stroke-dashoffset: 800;
	transition: stroke-dashoffset 0.6s ease-in;
}

.checkbox-tick {
	stroke: var(--accent-solid);
	stroke-dasharray: 172;
	stroke-dashoffset: 172;
	transition: stroke-dashoffset 0.6s ease-in;
}