/*
 * [bld_language_switcher] disclosure menu. Theme-neutral (inherits colour and font; every colour is a variable with a safe
 * fallback) so it works in the WoodMart, Astra, Blocksy, Kava, Superio and BlockStrap header slots. Logical properties only:
 * the panel opens toward the inline-start edge in a right-to-left page and nothing is mirrored by hand. Targets are 44px.
 */
.bld-lang-switcher {
	--bld-ls-fg: var(--bld-ls-color, currentColor);
	--bld-ls-bg: var(--bld-ls-surface, #fff);
	--bld-ls-ink: var(--bld-ls-surface-ink, #111827);
	--bld-ls-muted: var(--bld-ls-region-ink, #4b5563);
	--bld-ls-line: var(--bld-ls-border, rgb(0 0 0 / 15%));
	--bld-ls-focus: var(--bld-ls-focus-ring, #1d4ed8);
	position: relative;
	display: inline-block;
	font: inherit;
	line-height: 1.3;
}

.bld-lang-switcher__details {
	position: relative;
}

.bld-lang-switcher__summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	box-sizing: border-box;
	min-block-size: 44px;
	min-inline-size: 44px;
	padding-block: 0.5em;
	padding-inline: 0.75em;
	color: var(--bld-ls-fg);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.bld-lang-switcher__summary::-webkit-details-marker {
	display: none;
}

.bld-lang-switcher__chevron {
	inline-size: 0.5em;
	block-size: 0.5em;
	border-block-end: 2px solid currentcolor;
	border-inline-end: 2px solid currentcolor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.15s ease;
}

.bld-lang-switcher__details[open] > .bld-lang-switcher__summary .bld-lang-switcher__chevron {
	transform: translateY(0.1em) rotate(-135deg);
}

.bld-lang-switcher__panel {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-end: 0;
	z-index: 1000;
	box-sizing: border-box;
	min-inline-size: 16rem;
	max-inline-size: min(22rem, calc(100vw - 2rem));
	max-block-size: min(70vh, 32rem);
	overflow-y: auto;
	padding: 0.5rem;
	background: var(--bld-ls-bg);
	color: var(--bld-ls-ink);
	border: 1px solid var(--bld-ls-line);
	border-radius: 0.5rem;
	box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
}

.bld-lang-switcher__group + .bld-lang-switcher__group {
	margin-block-start: 0.5rem;
	padding-block-start: 0.5rem;
	border-block-start: 1px solid var(--bld-ls-line);
}

.bld-lang-switcher__region {
	margin: 0;
	padding-block: 0.25rem;
	padding-inline: 0.75rem;
	color: var(--bld-ls-muted);
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bld-lang-switcher__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bld-lang-switcher__link {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-block-size: 44px;
	padding-block: 0.5em;
	padding-inline: 0.75rem;
	color: inherit;
	text-decoration: none;
	border-radius: 0.375rem;
}

/* The label is in its own language and direction; the row itself follows the page, so every row starts at the same edge. */
.bld-lang-switcher__label {
	unicode-bidi: isolate;
}

.bld-lang-switcher__link:hover,
.bld-lang-switcher__link:focus-visible {
	background: rgb(0 0 0 / 7%);
}

.bld-lang-switcher__link[aria-current="true"] {
	font-weight: 700;
}

.bld-lang-switcher__link[aria-current="true"]::after {
	content: "\2713";
	margin-inline-start: auto;
	padding-inline-start: 0.75em;
}

.bld-lang-switcher__summary:focus-visible,
.bld-lang-switcher__link:focus-visible {
	outline: 2px solid var(--bld-ls-focus);
	outline-offset: 2px;
}

/* Flat list style. */
.bld-lang-switcher:not(.bld-lang-switcher--menu) .bld-lang-switcher__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

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

@media (forced-colors: active) {
	.bld-lang-switcher__panel {
		border-color: CanvasText;
	}
}