/* SX-Plugin — language switcher */

.sx-langs {
	--sx-lang-gap: 8px;
	--sx-lang-radius: 999px;
	--sx-lang-color: currentColor;
	--sx-lang-bg: transparent;
	--sx-lang-color-current: #fff;
	--sx-lang-bg-current: rgba(11, 110, 79, 1);

	display: flex;
	align-items: center;
	gap: var(--sx-lang-gap);
	/* Language names are their own scripts; never mirror this row. */
	direction: ltr;
}

/* Scoped through .sx-langs so a theme's own `a` skin cannot repaint the items —
   Royal Elementor Kit styles bare links and buttons site-wide. */
.sx-langs .sx-langs__item {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--sx-lang-radius);
	color: var(--sx-lang-color);
	background: var(--sx-lang-bg);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sx-langs .sx-langs__item:hover,
.sx-langs .sx-langs__item:focus {
	color: var(--sx-lang-color);
	background: var(--sx-lang-bg-current);
	text-decoration: none;
}

.sx-langs .sx-langs__item.is-current {
	color: var(--sx-lang-color-current);
	background: var(--sx-lang-bg-current);
	cursor: default;
}

.sx-langs .sx-langs__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Showing only the destination language: it is a link, not the current page's
   language, so it keeps the normal treatment — that way the Normal colour
   controls are the ones that affect what you actually see. */
.sx-langs--single.sx-langs--pill { padding: 0; box-shadow: none; }

/* Pill: one continuous control with the two languages inside it. */
.sx-langs--pill {
	gap: 0;
	padding: 2px;
	border-radius: var(--sx-lang-radius);
	background: var(--sx-lang-bg);
	box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.25);
}

.sx-langs--pill .sx-langs__item { background: transparent; }

.sx-langs--pill .sx-langs__item:hover {
	background: rgba(128, 128, 128, 0.12);
	color: var(--sx-lang-color);
}

.sx-langs--pill .sx-langs__item.is-current {
	background: var(--sx-lang-bg-current);
	color: var(--sx-lang-color-current);
}