.rc-lang-switcher__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	padding: 0;
	margin: 0;
	list-style: none;
}

.rc-lang-switcher__item {
	display: inline-flex;
}

.rc-lang-switcher__link,
.rc-lang-switcher__current {
	display: inline-flex;
	align-items: center;
	min-height: var(--target-min);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-md);
	font-size: var(--text-small);
	line-height: var(--leading-normal);
}

.rc-lang-switcher__link {
	color: var(--color-text-muted);
	text-decoration: none;
}

.rc-lang-switcher__link:hover {
	color: var(--color-link-hover);
	background-color: var(--color-surface-sunken);
}

.rc-lang-switcher__current {
	color: var(--color-text);
	font-weight: var(--weight-semibold);
	background-color: var(--color-surface-sunken);
}

/*
 * On a dark surface, distinguish current from links with weight and an
 * underline rather than a translucent panel, so the component stays tokens-only
 * (no raw colour values). Devanagari and Gujarati need a little more line height
 * than Latin at the same size (docs/DESIGN_SYSTEM.md); the relaxed leading above
 * covers it.
 */
.rc-on-dark .rc-lang-switcher__link,
.rc-on-dark .rc-lang-switcher__current {
	color: var(--color-text-inverse);
	background-color: transparent;
}

.rc-on-dark .rc-lang-switcher__link:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.rc-on-dark .rc-lang-switcher__current {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}