.wvl-social-icons {
	--wvl-social-icon-size: 32px;
	--wvl-social-icon-gap: 16px;
	--wvl-social-gray: #888888;

	display: flex;
	align-items: center;
	gap: var(--wvl-social-icon-gap);
	line-height: 0;
}

.wvl-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wvl-social-icon-size);
	height: var(--wvl-social-icon-size);
	text-decoration: none;
	color: var(--wvl-social-gray) !important;
	transition: color 0.2s ease;
}

.wvl-social-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Nucleo (and most flat) icon SVGs bake in a fixed fill color (often plain
   black) rather than using currentColor, so grayscale-vs-brand-color has to
   be driven by overriding every shape's fill/stroke to follow the link's
   own `color` -- gray by default, the icon's brand color (set per-icon via
   the --wvl-icon-color custom property, see class-shortcode.php) on
   hover/focus. */
.wvl-social-icon svg,
.wvl-social-icon svg * {
	fill: currentColor !important;
	stroke: none;
}

.wvl-social-icon:hover,
.wvl-social-icon:focus-visible {
	color: var(--wvl-icon-color, var(--wvl-social-gray)) !important;
}