/* Icon-Liste. Größe, Abstand und Spalten kommen als Custom Properties
   aus dem Block, damit sich alles im Editor einstellen lässt. */

.esecom-icon-list {
	--esecom-icon-size: 48px;
	--esecom-icon-gap: 16px;
	--esecom-icon-columns: 1;
	--esecom-icon-align: center;

	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--esecom-icon-columns), minmax(0, 1fr));
	gap: var(--esecom-icon-gap);
}

.esecom-icon-list__item {
	display: flex;
	align-items: var(--esecom-icon-align);
	gap: calc(var(--esecom-icon-gap) * 0.75);
	margin: 0;
}

.esecom-icon-list__link {
	display: flex;
	align-items: inherit;
	gap: inherit;
	/* Nutzt die im Block eingestellte Linkfarbe, sonst die Textfarbe.
	   Ein hartes color:inherit wuerde die Einstellung im Editor aushebeln. */
	color: var(--wp--style--color--link, inherit);
	text-decoration: none;
}

.esecom-icon-list__link:hover .esecom-icon-list__text,
.esecom-icon-list__link:focus-visible .esecom-icon-list__text {
	text-decoration: underline;
}

.esecom-icon-list__icon {
	flex: 0 0 auto;
	display: block;
	width: var(--esecom-icon-size);
	height: var(--esecom-icon-size);
}

.esecom-icon-list__text {
	min-width: 0;
	/* Erbt Schriftart, -groesse und -schnitt vom Block. */
	font: inherit;
	color: inherit;
}

/* Gilt für Liste und Fließtext gleichermaßen. */
.esecom-icon__svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Einzelnes Icon im Fließtext: an der Schriftlinie ausgerichtet. */
.esecom-icon-inline {
	display: inline-block;
	width: var(--esecom-icon-size, 1.2em);
	height: var(--esecom-icon-size, 1.2em);
	vertical-align: -0.2em;
}

@media (max-width: 600px) {
	.esecom-icon-list--grid {
		grid-template-columns: 1fr;
	}
}