/**
 * Compact "current selection" pill for [lcs_locale_indicator].
 * Designed to sit inline inside a nav menu without disrupting its layout:
 * no fixed/absolute positioning.
 *
 * Font size is inherited from wherever the shortcode is placed, so it
 * automatically matches the surrounding menu's own text size rather than
 * imposing a fixed value that could clash with the theme. Padding, gaps,
 * and the flag size are all in em units so the whole pill scales together
 * proportionally, whatever size it inherits.
 *
 * To override the size manually instead of inheriting it, target the
 * custom property from your theme's own CSS (e.g. in Appearance ->
 * Customize -> Additional CSS):
 *
 *   .lcs-locale-indicator { --lcs-indicator-font-size: 14px; }
 */

.lcs-locale-indicator {
	--lcs-indicator-font-size: inherit;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.32em 0.75em;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	font-size: var(--lcs-indicator-font-size);
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	vertical-align: middle;
	color: inherit;
	background: rgba(0, 0, 0, 0.03);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lcs-locale-indicator:hover,
.lcs-locale-indicator:focus-visible {
	background: rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.28);
	outline: none;
}

.lcs-locale-indicator:focus-visible {
	box-shadow: 0 0 0 2px rgba(79, 110, 247, 0.35);
}

.lcs-li-flag {
	font-size: 1.1em;
	line-height: 1;
}

.lcs-li-lang {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.lcs-li-sep {
	opacity: 0.45;
}

.lcs-li-currency {
	font-weight: 500;
	opacity: 0.85;
}

/* Dark-background menus: if the theme's menu bar has a dark background,
   the default border/background above (based on rgba black) will look
   washed out. Themes can override with more specific selectors, or the
   store owner can add a small snippet targeting their own menu class,
   e.g.: .site-header .lcs-locale-indicator { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); } */