style.scss

.wp-block-social-links {
	// This block has customizable padding, border-box makes that more predictable.
	box-sizing: border-box;

	padding-left: 0;
	padding-right: 0;
	// Some themes set text-indent on all <ul>
	text-indent: 0;
	// Some themes give all <ul> default margin instead of padding.
	margin-left: 0;

	// Unset background colors that can be inherited from Global Styles.
	background: none;

	// Some themes add underlines, false underlines (via shadows), and borders to <a>.
	.wp-social-link a,
	.wp-social-link a:hover {
		text-decoration: none;
		border-bottom: 0;
		box-shadow: none;
	}

	.wp-social-link {
		svg {
			width: 1em;
			height: 1em;
		}

		span:not(.screen-reader-text) {
			margin-left: 0.5em;
			margin-right: 0.5em;
			font-size: 0.65em;
		}
	}

	// Icon sizes.
	// Small.
	&.has-small-icon-size {
		font-size: 16px; // 16 makes for a quarter-padding that keeps the icon centered.
	}

	// Normal/default.
	&,
	&.has-normal-icon-size {
		font-size: 24px;
	}

	// Large.
	&.has-large-icon-size {
		font-size: 36px;
	}

	// Huge.
	&.has-huge-icon-size {
		font-size: 48px;
	}

	// Center flex items. This has an equivalent in editor.scss.
	// It also needs to override some of the default classes usually applied to the centering class.
	// align left must not be set, because this is the default (flex-start).
	&.aligncenter {
		justify-content: center;
		display: flex;
	}
	&.alignright {
		justify-content: flex-end;
	}
}

.wp-block-social-link {
	display: block;
	border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
	transition: transform 0.1s ease;
	@include reduce-motion("transition");

	// Dimensions.
	height: auto;

	a {
		align-items: center;
		display: flex;
		line-height: 0;
		transition: transform 0.1s ease;
	}

	&:hover {
		transform: scale(1.1);
	}
}

// This needs specificity because themes usually override it with things like .widget-area a.
.wp-block-social-links .wp-block-social-link.wp-social-link {
	display: inline-block;
	margin: 0;
	padding: 0;

	.wp-block-social-link-anchor {
		&,
		&:hover,
		&:active,
		&:visited,
		svg {
			color: currentColor;
			fill: currentColor;
		}
	}
}

// Provide colors for a range of icons.
:where(.wp-block-social-links:not(.is-style-logos-only)) {
	// Generic items such as mail, feed, etc.
	@import "../social-link/socials-with-bg.scss";
}

// Treatment for logos only style.
// The specificity for this selector has not been reduced to 0-1-0 as per
// global styles variation selectors as the lack of background should be
// enforced for this block style.
:where(.wp-block-social-links.is-style-logos-only) {
	.wp-social-link {
		background: none;

		// Make these bigger.
		svg {
			width: 1.25em;
			height: 1.25em;
		}
	}

	@import "../social-link/socials-without-bg.scss";
}

// Treatment for pill shape style.
.wp-block-social-links.is-style-pill-shape {
	.wp-social-link {
		width: auto;
	}
}

// The following rules have their selector specificity set to 0-1-0 to
// facilitate theme.json styling of the inner social-link block padding.
:root :where(.wp-block-social-links .wp-social-link a) {
	padding: 0.25em;
}
:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link a) {
	padding: 0;
}
:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link a) {
	padding-left: calc((2/3) * 1em);
	padding-right: calc((2/3) * 1em);
}

// Ensure the Snapchat label is visible when no custom
// icon color or background color is set.
.wp-block-social-links:not(.has-icon-color):not(.has-icon-background-color) {
	.wp-social-link-snapchat {
		.wp-block-social-link-label {
			color: #000;
		}
	}
}