/* =============================================
   02_UI_COMPONENTS / ui-soc-link
   Ссылка на соцсеть (большая, с фоном).
   ============================================= */

.soc-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background-color: var(--grayColor);
	border-radius: 100px;
	line-height: 125%;
	transition: box-shadow 0.3s, outline-color 0.3s;
	outline: 2px solid transparent;
}
.soc-link svg,
.soc-link img {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	object-fit: contain;
}
.soc-link:active {
	outline-color: rgba(7, 158, 108, 0.2);
}

/* ── Responsive ── */

@media (max-width: 63.99875em) {
	.soc-link {
		padding: 10px 24px;
		font-size: 16px;
	}
}
@media (min-width: 63.99875em) {
	.soc-link {
		font-size: 20px;
		padding: 16px 32px;
	}
}

/* ── Hover ── */

@media (any-hover: hover), (pointer: fine) {
	html:not([data-fls-touch]) .soc-link:hover {
		box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
	}
}