/**
 * Gutenberg — custom icoon op lijsten en koppen.
 * Icoon via CSS-variabele --mgh-block-icon.
 */

/* ── Gedeeld ─────────────────────────────────────────────────────────────── */

.mgh-has-icon {
	--mgh-block-icon-size: 1.1em;
}

/* Legacy class van eerdere list-implementatie */
.mgh-list-has-icon {
	--mgh-block-icon: var(--mgh-list-icon, var(--mgh-block-icon));
}

/* ── Lijst ────────────────────────────────────────────────────────────────── */

.wp-block-list.mgh-has-icon,
.wp-block-list.mgh-list-has-icon,
ul.mgh-has-icon,
ul.mgh-list-has-icon,
ol.mgh-has-icon,
ol.mgh-list-has-icon {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.wp-block-list.mgh-has-icon > li,
.wp-block-list.mgh-list-has-icon > li,
ul.mgh-has-icon > li,
ul.mgh-list-has-icon > li,
ol.mgh-has-icon > li,
ol.mgh-list-has-icon > li {
	position: relative;
	padding-left: 1.75em;
	margin-bottom: 0.45em;
}

.wp-block-list.mgh-has-icon > li::before,
.wp-block-list.mgh-list-has-icon > li::before,
ul.mgh-has-icon > li::before,
ul.mgh-list-has-icon > li::before,
ol.mgh-has-icon > li::before,
ol.mgh-list-has-icon > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: var(--mgh-block-icon-size);
	height: var(--mgh-block-icon-size);
	background-color: currentColor;
	-webkit-mask: var(--mgh-list-icon, var(--mgh-block-icon)) center / contain no-repeat;
	mask: var(--mgh-list-icon, var(--mgh-block-icon)) center / contain no-repeat;
}

/* ── Koptekst ─────────────────────────────────────────────────────────────── */

.wp-block-heading.mgh-has-icon,
h1.mgh-has-icon,
h2.mgh-has-icon,
h3.mgh-has-icon,
h4.mgh-has-icon,
h5.mgh-has-icon,
h6.mgh-has-icon {
	display: flex;
	align-items: center;
	gap: 0.45em;
}

.wp-block-heading.mgh-has-icon::before,
h1.mgh-has-icon::before,
h2.mgh-has-icon::before,
h3.mgh-has-icon::before,
h4.mgh-has-icon::before,
h5.mgh-has-icon::before,
h6.mgh-has-icon::before {
	content: "";
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--mgh-block-icon) center / contain no-repeat;
	mask: var(--mgh-block-icon) center / contain no-repeat;
}