/**
 * 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-weight-active: 600;
	--pls-text-opacity: 100%;
	--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);
	opacity: calc(var(--pls-text-opacity) / 100%);
	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);
	opacity: 1;
	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);
	font-weight: var(--pls-weight-active);
	opacity: 1;
	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;
	}
}

/* Wording overrides.
   Every language's version of an overridden phrase sits in the page at once,
   inside a notranslate wrapper, and only the current one is shown. Hidden by
   default so nothing flashes doubled before the script marks the right one. */

.pls-t__v {
	display: none;
}

.pls-t__v.is-on {
	display: inline;
}

/* Text only: no track, no divider, no marker on the selected language beyond
   its own colour and weight. For sitting inside a coloured header bar, where
   any track or underline would read as a second element. */

.pls--bare {
	padding: 0;
	gap: var(--pls-gap);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* Spacing comes from the items, as in the divided style, so the words are
   comfortably apart by default and the gap control still adjusts them. The
   outer edges stay flush, so the switcher lines up with whatever sits beside
   it in a header bar. */
.pls--bare .pls__item {
	padding: 0 0.75em;
	border-radius: 0;
	background: transparent;
}

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

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

.pls--bare .pls__item:hover,
.pls--bare .pls__item:focus {
	background: transparent;
	text-decoration: none;
}

.pls--bare .pls__item.is-active,
.pls--bare .pls__item.is-active:hover,
.pls--bare .pls__item.is-active:focus {
	background: transparent;
	box-shadow: none;
}