.wp-block-social-links .wp-social-link {
	line-height: 0;
}

// The editor uses the button element, the frontend uses a link.
// Therefore we unstyle the button element to make it more like the frontend.
.wp-block-social-link-anchor {
	align-items: center;
	background: none;
	border: 0;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	font-size: inherit;
	color: currentColor;
	height: auto;
	font-weight: inherit;
	font-family: inherit;
	margin: 0;

	// This rule ensures social link buttons display correctly in template parts.
	opacity: 1;

	// This rule is duplicated from the style.scss and needs to be the same as there.
	padding: 0.25em;

	// Override the shared `.wp-block-social-link` class used on both the li and button
	// due to backwards compatibility from moving the blockProps from the li to the button.
	&:hover {
		transform: none;
	}
}

:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) {
	padding-left: calc((2/3) * 1em);
	padding-right: calc((2/3) * 1em);
}

:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
	padding: 0;
}

.wp-block-social-link__toolbar_content_text {
	// Corresponds to the size of the text control input in the block inspector.
	width: 250px;
}