/*
 * 08, de icoontjes in de header.
 *
 * Hoort bij inc/08-winkelwagen.php en assets/js/08-winkelwagen.js.
 *
 * De maat en de kleur komen uit de tokens in style.css, met een terugval
 * erachter. Het icoon is 16 pixels, gelijk aan de tekeningen die er nu staan.
 */

/* De a. ervoor is nodig: de Elementor-kit zet met `.elementor-kit-x a` een
   bruine linkkleur neer, en die is sterker dan een losse klasse. Zonder dit
   worden de icoontjes bruin in plaats van zwart. */
a.swipe-hicoon,
.swipe-hicoon {
	--hi-tekst: var(--swipe-tekst, #111);
	--hi-wit: var(--swipe-wit, #fefdfa);
	--hi-maat: var(--swipe-hicoon-maat, 16px);

	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;

	/* De ruimte tussen de iconen zit in de padding, zodat drie losse
	   shortcodes achter elkaar vanzelf goed staan en het tikdoel meteen groot
	   genoeg is. */
	padding: 8px;
	color: var(--hi-tekst);
	line-height: 0;
	text-decoration: none;
}

.swipe-hicoon,
.swipe-hicoon * {
	box-sizing: border-box;
}

a.swipe-hicoon:hover,
a.swipe-hicoon:focus,
.swipe-hicoon:hover,
.swipe-hicoon:focus {
	color: var(--hi-tekst);
	opacity: .6;
}

.swipe-hicoon__beeld {
	width: var(--hi-maat);
	height: var(--hi-maat);
	display: block;
}

/* De drie tekeningen staan op één onderlijn. Dat gebeurt in de svg zelf, met
   preserveAspectRatio="xMidYMax", zie inc/08-winkelwagen.php. Ze zijn niet even
   hoog: het hart is breed en laag, het poppetje en het tasje zijn hoog en smal.
   Om hun midden gecentreerd gaan ze dan zweven, op een onderlijn niet.

   Het poppetje staat daarbovenop nog twee pixels hoger. Dat is geen uitlijnfout
   maar een correctie op het oog: zijn schouderboog is een brede, open vorm die
   tot de onderrand doorloopt, en dat leest als doorzakken. Het hart en het
   tasje hebben een gesloten onderkant en houden zich wel aan de lijn. */
.swipe-hicoon--account .swipe-hicoon__beeld {
	transform: translateY(-2px);
}

/* Het cijfertje rechtsboven. Een gevuld rondje zonder lijntje eromheen, in de
   tekstkleur, met de achtergrondkleur van de site als cijfer. */
.swipe-hicoon__teller {
	display: inline-flex;
	position: absolute;
	top: 1px;
	right: 1px;
	align-items: center;
	justify-content: center;
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--hi-tekst);
	color: var(--hi-wit);
	font-size: 9px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
}

/* Leeg is geen nul in beeld: dan hoort er niets te staan. */
.swipe-hicoon__teller.is-leeg {
	display: none;
}

/* Voor de schermlezer, niet in beeld. Hello Elementor kent deze klasse al;
   deze regel staat er voor het geval een site hem niet meebrengt. */
.swipe-hicoon .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}