/* Social profile icons - template-parts/social-links-part.php, used by the
   footer and the mobile menu. The icons are masks filled with the link colour,
   so each placement only sets `color`. */

.social-links {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links__link {
	display: block;
	color: inherit;
	transition: opacity 0.2s;
}

.social-links__link:hover {
	color: inherit;
	opacity: 0.7;
}

.social-links__icon {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	background: currentColor;
	-webkit-mask: var(--social-icon) no-repeat center / auto 1.4rem;
	mask: var(--social-icon) no-repeat center / auto 1.4rem;
}

.social-links__icon--facebook {
	--social-icon: url("../template-img/icon_facebook.svg");
}

.social-links__icon--instagram {
	--social-icon: url("../template-img/icon_instagram.svg");

	-webkit-mask-size: 1.75rem;
	mask-size: 1.75rem;
}

.social-links__icon--youtube {
	--social-icon: url("../template-img/icon_youtube.svg");

	-webkit-mask-size: 1.75rem auto;
	mask-size: 1.75rem auto;
}

.social-links__icon--linkedin {
	--social-icon: url("../template-img/icon_linkedin.svg");
}

.social-links__icon--pinterest {
	--social-icon: url("../template-img/icon_pinterest.svg");
}