/**
 * Pill Language Switcher
 *
 * Every visual value is a custom property. The plugin prints its own values on
 * `.pls.pls`, which outranks the size modifiers here, so saved settings win
 * without !important — and a theme can still override any single property.
 */

.pls {
	/* Colour */
	--pls-track: #ededed;
	--pls-text: #4a4a4a;
	--pls-text-active: #2f3a2c;
	--pls-hover: #e2e2e2;
	--pls-accent: #a8d38a;
	--pls-border-color: #dedede;

	/* Type */
	--pls-font-family: inherit;
	--pls-size: 15px;
	--pls-weight: 600;
	--pls-font-style: normal;
	--pls-transform: none;
	--pls-letter-spacing: 0.04em;

	/* Shape */
	--pls-pad-x: 1.15em;
	--pls-pad-y: 0.55em;
	--pls-track-pad: 4px;
	--pls-gap: 2px;
	--pls-radius: 999px;
	--pls-border-width: 0px;
	--pls-shadow: none;
	--pls-transition: 180ms;

	/* Multiplier applied by the size modifiers, so sm/md/lg still work on top
	   of a custom font size. */
	--pls-scale: 1;

	display: inline-flex;
	align-items: center;
	gap: var(--pls-gap);
	max-width: 100%;
	padding: var(--pls-track-pad);
	border: var(--pls-border-width) solid var(--pls-border-color);
	border-radius: var(--pls-radius);
	background: var(--pls-track);
	box-shadow: var(--pls-shadow);
	font-family: var(--pls-font-family);
	font-size: calc(var(--pls-size) * var(--pls-scale));
	line-height: 1;
	flex-wrap: wrap;
}

.pls__item {
	display: inline-block;
	padding: var(--pls-pad-y) var(--pls-pad-x);
	/* Sit just inside the track's curve. */
	border-radius: max(0px, calc(var(--pls-radius) - var(--pls-track-pad)));
	background: transparent;
	color: var(--pls-text);
	font-family: inherit;
	font-size: 1em;
	font-weight: var(--pls-weight);
	font-style: var(--pls-font-style);
	letter-spacing: var(--pls-letter-spacing);
	text-transform: var(--pls-transform);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--pls-transition) ease, color var(--pls-transition) ease;
}

.pls__item:hover,
.pls__item:focus {
	background: var(--pls-hover);
	color: var(--pls-text);
	text-decoration: none;
}

.pls__item.is-active,
.pls__item.is-active:hover,
.pls__item.is-active:focus {
	background: var(--pls-accent);
	color: var(--pls-text-active);
	cursor: default;
}

.pls__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Sizes — a scale factor, so they compose with a custom font size instead of
   fighting it. Padding is in em, so it follows along. */

.pls--sm {
	--pls-scale: 0.87;
}

.pls--lg {
	--pls-scale: 1.15;
}

/* Underline variant: no track, selected language gets a coloured rule. */

.pls--underline {
	padding: 0;
	gap: 1.25em;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.pls--underline .pls__item {
	padding: 0.35em 0;
	border-radius: 0;
	box-shadow: inset 0 -2px 0 transparent;
	transition: box-shadow var(--pls-transition) ease, color var(--pls-transition) ease;
}

.pls--underline .pls__item:hover,
.pls--underline .pls__item:focus {
	background: transparent;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

.pls--underline .pls__item.is-active,
.pls--underline .pls__item.is-active:hover,
.pls--underline .pls__item.is-active:focus {
	background: transparent;
	box-shadow: inset 0 -3px 0 var(--pls-accent);
}

/* Plain variant: text links with a thin divider. */

.pls--plain {
	padding: 0;
	gap: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.pls--plain .pls__item {
	padding: 0 0.75em;
	border-radius: 0;
}

.pls--plain .pls__item + .pls__item {
	border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.pls--plain .pls__item:first-child {
	padding-left: 0;
}

.pls--plain .pls__item:last-child {
	padding-right: 0;
}

.pls--plain .pls__item:hover,
.pls--plain .pls__item:focus {
	background: transparent;
	color: #000;
}

.pls--plain .pls__item.is-active,
.pls--plain .pls__item.is-active:hover,
.pls--plain .pls__item.is-active:focus {
	background: transparent;
	color: var(--pls-text-active);
	box-shadow: inset 0 -0.6em 0 var(--pls-accent);
}

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