/* Decorative SVG flags keep the existing language labels and native links. */
html body #pd-header .pd-header-inner > .pd-language-slot {
  flex-basis: auto;
  width: auto;
}

#pd-header .pd-language > summary::before,
#pd-header .pd-language > .pd-lang-menu > a::before {
  content: var(--pd-language-flag-content, none);
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  background: var(--pd-language-flag) center / cover no-repeat;
  box-shadow: 0 1px 3px rgb(0 0 0 / 24%), 0 0 0 1px rgb(210 229 240 / 20%);
}

#pd-header .pd-language > summary::before {
  flex-basis: 20px;
  width: 20px;
  height: 14px;
  border-radius: 2px;
}

#pd-header .pd-language > .pd-lang-menu > a {
  column-gap: 6px;
}

html[lang|="en" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="en" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/en.svg");
}

html[lang|="ar" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="ar" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/ar.svg");
}

html[lang|="de" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="de" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/de.svg");
}

html[lang|="es" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="es" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/es.svg");
}

html[lang|="fa" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="fa" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/fa.svg");
}

html[lang|="fr" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="fr" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/fr.svg");
}

html[lang|="he" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="he" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/he.svg");
}

html[lang|="hi" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="hi" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/hi.svg");
}

html[lang|="id" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="id" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/id.svg");
}

html[lang|="it" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="it" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/it.svg");
}

html[lang|="ja" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="ja" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/ja.svg");
}

html[lang|="ko" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="ko" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/ko.svg");
}

html[lang|="nl" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="nl" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/nl.svg");
}

html[lang|="pl" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="pl" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/pl.svg");
}

html[lang|="pt" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="pt" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/pt.svg");
}

html[lang|="ro" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="ro" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/ro.svg");
}

html[lang|="ru" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="ru" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/ru.svg");
}

html[lang|="th" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="th" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/th.svg");
}

html[lang|="tl" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="tl" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/tl.svg");
}

html[lang|="tr" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="tr" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/tr.svg");
}

html[lang|="uk" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="uk" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/uk.svg");
}

html[lang|="vi" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="vi" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/vi.svg");
}

html[lang|="zh" i] #pd-header .pd-language > summary,
#pd-header .pd-language > .pd-lang-menu > a[lang|="zh" i] {
  --pd-language-flag-content: "";
  --pd-language-flag: url("/assets/flags/zh.svg");
}