/*
 * SGGW Social Icons contract for core/social-links.
 *
 * A block without an explicit style and is-style-default are treated as
 * Filled for backwards compatibility. Pill Shape remains a legacy Core style
 * outside this adapter; Logos Only is the muted-link alternative to the three
 * button styles.
 */

.wp-block-social-links {
	/* Resolve the same surface-aware resting and hover pairs as Filled Button. */
	--wp--custom--component--social-links--background: var(--sggw-button-background);
	--wp--custom--component--social-links--background-hover: var(--sggw-button-background-hover);
	--wp--custom--component--social-links--background-pressed: color-mix(
		in srgb,
		var(--sggw-button-foreground) var(--wp--custom--state-layer--pressed),
		var(--sggw-button-background)
	);
	--wp--custom--component--social-links--foreground: var(--sggw-button-foreground);
	--wp--custom--component--social-links--foreground-hover: var(--sggw-button-foreground-hover);
}

:where(
	.wp-block-social-links:not([class*="is-style-"]),
	.wp-block-social-links.is-style-default,
	.wp-block-social-links.is-style-fill,
	.wp-block-social-links.is-style-outline,
	.wp-block-social-links.is-style-sggw-ghost,
	.wp-block-social-links.is-style-logos-only
) .wp-block-social-link {
	background-color: transparent !important;
	border-radius: var(--wp--custom--radius--small) !important;
	color: var(--wp--custom--component--social-links--foreground) !important;
	transform: none !important;
	transition: none !important;
}

:where(
	.wp-block-social-links:not([class*="is-style-"]),
	.wp-block-social-links.is-style-default,
	.wp-block-social-links.is-style-fill,
	.wp-block-social-links.is-style-outline,
	.wp-block-social-links.is-style-sggw-ghost,
	.wp-block-social-links.is-style-logos-only
) .wp-block-social-link-anchor {
	background-color: var(--wp--custom--component--social-links--background) !important;
	background-image: none !important;
	border-color: transparent !important;
	border-radius: var(--wp--custom--radius--small) !important;
	border-style: solid !important;
	border-width: var(--wp--custom--line--width) !important;
	box-shadow: none !important;
	box-sizing: border-box;
	color: inherit !important;
	text-decoration: none !important;
	transform: none !important;
	transition: none !important;
}

.wp-block-social-links.is-style-outline .wp-block-social-link {
	color: var(--sggw-text) !important;
}

.wp-block-social-links.is-style-outline .wp-block-social-link-anchor {
	background-color: transparent !important;
	border-color: var(--sggw-line) !important;
}

.wp-block-social-links.is-style-sggw-ghost .wp-block-social-link {
	color: var(--sggw-text) !important;
}

.wp-block-social-links.is-style-sggw-ghost .wp-block-social-link-anchor {
	background-color: transparent !important;
	border-color: transparent !important;
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link {
	color: var(--sggw-text-muted) !important;
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor {
	background-color: transparent !important;
	border-color: transparent !important;
	border-width: 0 !important;
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor:visited {
	color: var(--sggw-text-muted) !important;
}

:where(
	.wp-block-social-links:not([class*="is-style-"]),
	.wp-block-social-links.is-style-default,
	.wp-block-social-links.is-style-fill,
	.wp-block-social-links.is-style-outline,
	.wp-block-social-links.is-style-sggw-ghost,
	.wp-block-social-links.is-style-logos-only
) .wp-block-social-link-anchor:focus:not(:focus-visible) {
	box-shadow: none !important;
	outline: none !important;
}

:where(
	.wp-block-social-links:not([class*="is-style-"]),
	.wp-block-social-links.is-style-default,
	.wp-block-social-links.is-style-fill,
	.wp-block-social-links.is-style-outline,
	.wp-block-social-links.is-style-sggw-ghost,
	.wp-block-social-links.is-style-logos-only
) .wp-block-social-link-anchor:focus-visible {
	outline: var(--wp--custom--line--focus-ring-width) solid var(--sggw-line-focus) !important;
	outline-offset: var(--wp--custom--line--focus-ring-offset) !important;
}

.wp-block-social-links.is-style-outline
	.wp-block-social-link-anchor:focus-visible:where(:not(:active)) {
	background-color: color-mix(
		in srgb,
		var(--sggw-text) var(--wp--custom--state-layer--hover),
		transparent
	) !important;
	border-color: var(--sggw-line) !important;
	color: var(--sggw-text) !important;
}

.wp-block-social-links.is-style-sggw-ghost
	.wp-block-social-link-anchor:focus-visible:where(:not(:active)) {
	background-color: color-mix(
		in srgb,
		var(--sggw-text) var(--wp--custom--state-layer--hover),
		transparent
	) !important;
	border-color: transparent !important;
	color: var(--sggw-text) !important;
}

.wp-block-social-links.is-style-logos-only
	.wp-block-social-link-anchor:focus-visible:where(:not(:active)) {
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--sggw-text) !important;
}

@media (hover: hover) {
	/* All button variants share Filled Button hover; pressed and logos-only stay separate. */
	:is(
		.wp-block-social-links:not([class*="is-style-"]),
		.wp-block-social-links.is-style-default,
		.wp-block-social-links.is-style-fill,
		.wp-block-social-links.is-style-outline,
		.wp-block-social-links.is-style-sggw-ghost
	) .wp-block-social-link-anchor:hover:where(:not(:active)) {
		background-color: var(--wp--custom--component--social-links--background-hover) !important;
		border-color: transparent !important;
		color: var(--wp--custom--component--social-links--foreground-hover) !important;
	}

	.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor:hover {
		background-color: transparent !important;
		border-color: transparent !important;
		color: var(--sggw-text) !important;
	}
}

:where(
	.wp-block-social-links:not([class*="is-style-"]),
	.wp-block-social-links.is-style-default,
	.wp-block-social-links.is-style-fill
) .wp-block-social-link-anchor:active {
	background-color: var(--wp--custom--component--social-links--background-pressed) !important;
	border-color: transparent !important;
	color: var(--wp--custom--component--social-links--foreground) !important;
}

.wp-block-social-links.is-style-outline .wp-block-social-link-anchor:active {
	background-color: color-mix(
		in srgb,
		var(--sggw-text) var(--wp--custom--state-layer--pressed),
		transparent
	) !important;
	border-color: var(--sggw-line) !important;
	color: var(--sggw-text) !important;
}

.wp-block-social-links.is-style-sggw-ghost .wp-block-social-link-anchor:active {
	background-color: color-mix(
		in srgb,
		var(--sggw-text) var(--wp--custom--state-layer--pressed),
		transparent
	) !important;
	border-color: transparent !important;
	color: var(--sggw-text) !important;
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor:active {
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--sggw-text) !important;
}

@media (forced-colors: active) {
	/* Match the normal variant specificity so system colors always take over. */
	:is(
		.wp-block-social-links:not([class*="is-style-"]),
		.wp-block-social-links.is-style-default,
		.wp-block-social-links.is-style-fill,
		.wp-block-social-links.is-style-outline,
		.wp-block-social-links.is-style-sggw-ghost
	) .wp-block-social-link-anchor {
		background-color: ButtonFace !important;
		border-color: ButtonBorder !important;
		color: ButtonText !important;
		forced-color-adjust: none;
	}

	:is(
		.wp-block-social-links:not([class*="is-style-"]),
		.wp-block-social-links.is-style-default,
		.wp-block-social-links.is-style-fill,
		.wp-block-social-links.is-style-outline,
		.wp-block-social-links.is-style-sggw-ghost
	) .wp-block-social-link-anchor:is(:hover, :focus-visible, :active) {
		background-color: Highlight !important;
		border-color: Highlight !important;
		color: HighlightText !important;
	}

	.wp-block-social-links.is-style-logos-only .wp-block-social-link,
	.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor,
	.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor:visited {
		background-color: transparent !important;
		border-color: transparent !important;
		color: LinkText !important;
		forced-color-adjust: none;
	}

	.wp-block-social-links.is-style-logos-only
		.wp-block-social-link-anchor:is(:hover, :focus-visible, :active) {
		background-color: transparent !important;
		border-color: transparent !important;
		color: CanvasText !important;
	}

	:where(
		.wp-block-social-links:not([class*="is-style-"]),
		.wp-block-social-links.is-style-default,
		.wp-block-social-links.is-style-fill,
		.wp-block-social-links.is-style-outline,
		.wp-block-social-links.is-style-sggw-ghost,
		.wp-block-social-links.is-style-logos-only
	) .wp-block-social-link-anchor:focus-visible {
		outline-color: Highlight !important;
	}
}