/*
 * Replacement for core's social-links stylesheet.
 *
 * Core ships brand colours for every one of its ~50 services regardless of how
 * many are on the page — 11.8 kB inline on every request for the three icons in
 * our footer, larger than the whole Global Styles block. This file is
 * registered as the block's `style_handles`, so core's own file is never
 * printed.
 *
 * Core's icon SVGs carry no `fill` attribute, so `currentColor` reaches them
 * and the icons inherit whatever colour the surrounding section style sets.
 */

.wp-block-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--style--block-gap, 0.5rem );
	margin: 0;
	padding: 0;
	list-style: none;
	text-indent: 0;
}

.wp-block-social-link {
	display: block;
	margin: 0;
}

.wp-block-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;

	/* 44px keeps the tap target above the WCAG 2.2 AA minimum (2.5.8). */
	width: 2.75rem;
	height: 2.75rem;
	color: inherit;
	text-decoration: none;
}

.wp-block-social-link svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentcolor;
}

.wp-block-social-link a:hover {
	opacity: 0.75;
}

.wp-block-social-link a:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

/* The label is for screen readers only; core hides it with this class. */
.wp-block-social-link .wp-block-social-link-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* is-style-logos-only — the footer's icons: 2.5rem circles on a translucent
   white, filling with the accent on hover. Core's own logos-only style strips
   the background and leaves the bare glyph; this puts the circle back.
 *
 * The gap is the block's own blockGap attribute. */
:root .wp-block-social-links.is-style-logos-only .wp-block-social-link {
	margin: 0;
	padding: 0;
}

:root .wp-block-social-links.is-style-logos-only .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0;
	border-radius: 9999px;
	background-color: color-mix( in srgb, var(--wp--preset--color--white) 10%, transparent );
	transition: background-color 200ms ease, color 200ms ease;
}

:root .wp-block-social-links.is-style-logos-only .wp-social-link a:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-dark);
}

:root .wp-block-social-links.is-style-logos-only .wp-social-link svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}