.social-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--system-spacing-gap-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links > li { display: flex; }

.social-links__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	color: var(--system-fg);
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--system-border-hairline);
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.social-links__link:hover,
.social-links__link:focus-visible {
	background-color: var(--system-bg-primary);
	color: var(--system-fg-on-primary);
	box-shadow: none;
}

.social-links__link:focus-visible {
	outline: 2px solid var(--system-fg-primary);
	outline-offset: 3px;
}

.social-links__link--text {
	width: auto;
	height: auto;
	padding: var(--system-spacing-inset-xs) var(--system-spacing-inset-sm);
	border-radius: var(--system-border-radius-lg);
}

.social-links__glyph {
	display: flex;
	width: 1rem;
	height: 1rem;
}

.social-links__glyph svg {
	display: block;
	width: 100%;
	height: 100%;
}

.social-links__glyph svg :is(path, circle, rect, polygon) {
	fill: currentColor;
}