/*
 * Hermia language switcher — frontend styling.
 *
 * The `lang-XX` class (on a switcher menu item, shortcode <li>, or
 * dropdown <details>) selects a circular SVG flag via background-image.
 * Path is relative to this CSS file (.../assets/switcher.css) so the
 * URL stays correct regardless of how the plugin is installed.
 */

/* Nav-menu integration: parent + dropdown children get a flag prefix. */
.hermia-switcher-menu > a {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4em;
}
.hermia-switcher-menu > a::before {
	content: "";
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	flex-shrink: 0;
	vertical-align: middle;
}

/* Shortcode-emitted switcher — the .hermia-switcher__emoji span holds
   the flag image. The original emoji char inside is hidden via font-size:0
   so SVG fully covers the box. */
.hermia-switcher__emoji {
	display: inline-block !important;
	width: 1.1em;
	height: 1.1em;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	flex-shrink: 0;
	vertical-align: middle;
	font-size: 0 !important;
	line-height: 0;
}

/* Per-language flag mapping. lang codes map to ISO 3166-1 alpha-2
   country codes (with regional variants where appropriate). The
   .lang-XX class can sit on either:
     - the nav <li>  (menu integration)
     - the shortcode <li>  (list / flags variant)
     - the dropdown <details>  (dropdown variant) */
.lang-nl    .hermia-switcher__emoji,
.lang-nl.hermia-switcher-menu    > a::before { background-image: url('flags/nl.svg'); }

.lang-en    .hermia-switcher__emoji,
.lang-en.hermia-switcher-menu    > a::before { background-image: url('flags/gb.svg'); }

.lang-en-gb .hermia-switcher__emoji,
.lang-en-gb.hermia-switcher-menu > a::before { background-image: url('flags/gb.svg'); }

.lang-en-us .hermia-switcher__emoji,
.lang-en-us.hermia-switcher-menu > a::before { background-image: url('flags/us.svg'); }

.lang-de    .hermia-switcher__emoji,
.lang-de.hermia-switcher-menu    > a::before { background-image: url('flags/de.svg'); }

.lang-fr    .hermia-switcher__emoji,
.lang-fr.hermia-switcher-menu    > a::before { background-image: url('flags/fr.svg'); }

.lang-es    .hermia-switcher__emoji,
.lang-es.hermia-switcher-menu    > a::before { background-image: url('flags/es.svg'); }

.lang-it    .hermia-switcher__emoji,
.lang-it.hermia-switcher-menu    > a::before { background-image: url('flags/it.svg'); }

.lang-pt    .hermia-switcher__emoji,
.lang-pt.hermia-switcher-menu    > a::before { background-image: url('flags/pt.svg'); }

.lang-pt-br .hermia-switcher__emoji,
.lang-pt-br.hermia-switcher-menu > a::before { background-image: url('flags/br.svg'); }

.lang-nl-be .hermia-switcher__emoji,
.lang-nl-be.hermia-switcher-menu > a::before { background-image: url('flags/be.svg'); }

.lang-fr-be .hermia-switcher__emoji,
.lang-fr-be.hermia-switcher-menu > a::before { background-image: url('flags/be.svg'); }

.lang-be    .hermia-switcher__emoji,
.lang-be.hermia-switcher-menu    > a::before { background-image: url('flags/be.svg'); }

.lang-da    .hermia-switcher__emoji,
.lang-da.hermia-switcher-menu    > a::before { background-image: url('flags/dk.svg'); }

.lang-sv    .hermia-switcher__emoji,
.lang-sv.hermia-switcher-menu    > a::before { background-image: url('flags/se.svg'); }

.lang-no    .hermia-switcher__emoji,
.lang-no.hermia-switcher-menu    > a::before { background-image: url('flags/no.svg'); }

.lang-fi    .hermia-switcher__emoji,
.lang-fi.hermia-switcher-menu    > a::before { background-image: url('flags/fi.svg'); }

.lang-pl    .hermia-switcher__emoji,
.lang-pl.hermia-switcher-menu    > a::before { background-image: url('flags/pl.svg'); }

.lang-cs    .hermia-switcher__emoji,
.lang-cs.hermia-switcher-menu    > a::before { background-image: url('flags/cz.svg'); }

.lang-hu    .hermia-switcher__emoji,
.lang-hu.hermia-switcher-menu    > a::before { background-image: url('flags/hu.svg'); }

.lang-ja    .hermia-switcher__emoji,
.lang-ja.hermia-switcher-menu    > a::before { background-image: url('flags/jp.svg'); }

.lang-zh    .hermia-switcher__emoji,
.lang-zh.hermia-switcher-menu    > a::before { background-image: url('flags/cn.svg'); }