/**
 * Icon — inline SVG sizing + social icon row.
 */

.slist-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	color: currentColor;
}

.slist-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.slist-icon--sm { width: 14px; height: 14px; }
.slist-icon--md { width: 20px; height: 20px; }
.slist-icon--lg { width: 28px; height: 28px; }

/* ---- Social icon row ---- */

.slist-social-row {
	display: flex;
	gap: var(--slist-space-3);
	align-items: center;
	line-height: 0;
}

.slist-social-row a {
	color: var(--slist-text-secondary);
	display: inline-flex;
	transition: color var(--slist-transition-fast);
}

.slist-social-row a:hover,
.slist-social-row a:focus-visible {
	color: var(--slist-text-primary);
}

.slist-social-row svg {
	width: 16px;
	height: 16px;
	display: block;
}