/*
 * ILM Components -- Social Links (1.16.0).
 *
 * One stylesheet for the list and its items: an item only ever appears inside
 * a list, so a second file would be a second request for the same row.
 *
 * Colour is inherited. The list's `color` (the page's, or its own design
 * colour) is what every mark is drawn in, through `fill="currentColor"`; the
 * link takes the site's link colour only under the pointer and on focus. So
 * a row of marks is one quiet colour until someone reaches for one of them,
 * and no mark carries a meaning in colour alone -- each one also has its
 * name.
 *
 * Every link is at least one target square: 36px at Small, 44px at Medium
 * (the default) and 52px at Large, whatever the icon inside it measures.
 */

.ilm-component--basic-social-links {
	--ilm-c-social-target: 2.75rem;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--ilm-c-text, start);
	gap: var(--ilm-c-gap, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilm-component--basic-social-links.ilm-size-sm {
	--ilm-c-social-target: 2.25rem;

	font-size: var(--ilm-font-size-sm, 0.875rem);
}

.ilm-component--basic-social-links.ilm-size-md {
	font-size: var(--ilm-font-size-base, 1rem);
}

.ilm-component--basic-social-links.ilm-size-lg {
	--ilm-c-social-target: 3.25rem;

	font-size: var(--ilm-font-size-xl, 1.25rem);
}

.ilm-social__item {
	margin: 0;
	padding: 0;
}

.ilm-social__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-block-size: var(--ilm-c-social-target);
	min-inline-size: var(--ilm-c-social-target);
	border-radius: var(--ilm-radius-md, 0.5rem);
	color: inherit;
	text-decoration: none;
	transition:
		color var(--ilm-transition-base, 200ms) ease,
		background-color var(--ilm-transition-base, 200ms) ease;
}

.ilm-social--icon-text .ilm-social__link {
	padding-inline: 0.5em 0.75em;
}

.ilm-social__link:hover,
.ilm-social__link:focus-visible {
	color: var(--ilm-color-link, currentColor);
	background-color: var(--ilm-color-bg-strong, transparent);
}

/*
 * A visible ring, always, from the same token Button's ring uses. `outline`
 * because Windows High Contrast Mode keeps outlines and drops box-shadows.
 */
.ilm-social__link:focus-visible {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 2px;
}

.ilm-social__icon {
	flex: none;
	inline-size: 1.25em;
	block-size: 1.25em;
}

/*
 * Icon only: the name stays in the link, out of sight. Hidden this way and
 * not with `display: none`, which would remove it from the accessibility
 * tree too and leave a link with no name.
 */
.ilm-social--icon .ilm-social__name {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ilm-social__link {
		transition: none;
	}
}