# polylang/trunk/css/build/navigation-language-switcher-editor.css

Polylang, version trunk. 93 lines.

- Page: https://pluginprobe.com/plugins/polylang/trunk/code/css/build/navigation-language-switcher-editor.css
- Raw: https://pluginprobe.com/plugins/polylang/trunk/raw/css/build/navigation-language-switcher-editor.css
- Modified: 2026-09-14T16:30:38+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/polylang/trunk/code/css/build/navigation-language-switcher-editor.css#L10-L20`.

```css
/**
 * Flag styling for the language switcher block editor.
 *
 * Keep these styles in sync with the inline CSS in
 * `src/Switcher/Element/Abstract_Element.php` (`Abstract_Element::set_flag()`)
 * and `src/Switcher/Element/Nav.php` (`Nav::get_label()`).
 */

.pll-switcher-flag + .pll-switcher-label {
	margin-inline-start: var( --pll-flag-label-spacing, 0.3em );
	writing-mode: horizontal-tb;
}

.pll-switcher-flag {
	display: inline-block;
	flex-shrink: 0;
	width: var( --pll-flag-width, 18px );
	overflow: hidden;
	/*
	 * Map the block control value (0–100) to a CSS percentage radius.
	 * 50% is the maximum useful value (fully rounded); the 0.5 factor
	 * converts 100 → 50%, keeping the slider responsive across the range.
	 */
	border-radius: calc( var( --pll-flag-border-radius, 0 ) * 0.5 * 1% );
}

.pll-aspect-ratio-32 .pll-switcher-flag,
.pll-switcher-flag.pll-aspect-ratio-32 {
	aspect-ratio: 3 / 2;
}

.pll-aspect-ratio-11 .pll-switcher-flag,
.pll-switcher-flag.pll-aspect-ratio-11 {
	aspect-ratio: 1 / 1;
}

.pll-switcher-flag img {
	display: block;
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}

/**
 * Shared vertical alignment for navigation language switcher.
 */

.wp-block-navigation .wp-block-polylang-navigation-language-switcher {
	align-self: center;
}

.wp-block-polylang-navigation-language-switcher :is( a, .wp-block-navigation-item__content ) {
	display: inline-flex;
	align-items: center;
	width: auto;
	max-width: none;
	vertical-align: middle;
}

.wp-block-polylang-navigation-language-switcher :is( a, .wp-block-navigation-item__content ):has( .pll-switcher-flag ) {
	line-height: 0;
}

.wp-block-polylang-navigation-language-switcher .pll-switcher-label,
.wp-block-polylang-navigation-language-switcher .wp-block-navigation-item__label {
	display: inline-flex;
	align-items: center;
	width: auto;
	line-height: normal;
}

.wp-block-polylang-navigation-language-switcher .pll-switcher-flag {
	display: flex;
	align-items: center;
}

/**
 * Navigation language switcher block (editor).
 */

.wp-block-polylang-navigation-language-switcher {
	display: inline-flex;
	align-items: center;
}

.wp-block-polylang-navigation-language-switcher .components-disabled {
	display: inline-flex;
	align-items: center;
	gap: var( --wp--style--block-gap, 2em );
}


```