/* COPIED from ~/Desktop/Design System/components/language-select.css on 2026-10-20 by selfprint/tools/build_zds.py.
   Do not edit here — change the Design System, then re-run the script. */
/* =============================================================================
   Zigu — Language select  (components/language-select.css)  · Molecule
   The capsule that switches the UI language: a globe, the language's own name, ▾. It is a Select — the same
   menu and behaviour (one open at a time · opens above when there's no room below · a Bottom sheet on a phone) —
   in the look of Zigu Printer Admin's top-bar language button. On a phone (< 600) only the globe shows: a circle.
   Requires tokens.css, icon.css, select.css (.zg-dropdown), menu.css (+ bottom-sheet.css for phones).
   Spec: components/language-select.md · Not in Figma (user, v0.5.156 — from Zigu Printer Admin).

   <div class="zg-dropdown">
     <button type="button" class="zg-language-select" aria-haspopup="listbox" aria-expanded="false" aria-label="언어: 한국어">
       <i class="zg-icon zg-icon--earth" aria-hidden="true"></i>
       <span class="zg-language-select__value" lang="ko">한국어</span>
       <i class="zg-icon zg-icon--angle-down zg-language-select__chevron" aria-hidden="true"></i>
     </button>
     <div class="zg-menu" role="listbox" aria-label="언어" hidden>
       <button type="button" class="zg-menu__item" role="option" aria-selected="true" lang="ko"><span class="zg-menu__label">한국어</span><i class="zg-icon zg-icon--check zg-menu__check" aria-hidden="true"></i></button>
       <button type="button" class="zg-menu__item" role="option" aria-selected="false" lang="en"><span class="zg-menu__label">English</span>…</button>
       <button type="button" class="zg-menu__item" role="option" aria-selected="false" lang="ar"><span class="zg-menu__label" dir="rtl">العربية</span>…</button>
     </div>
   </div>

   Every language is written in its own words and script (English · 한국어 · 日本語 · العربية), with lang (and dir) on it,
   so it reads right and a person finds their own language whatever the screen is in now. A right-to-left name turns only
   its words (dir on the label) — its row lines up with the others.
   --compact: the globe only at every width.
   ========================================================================== */
.zg-language-select {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
  height: var(--language-select-height);
  margin: 0;
  padding-block: 0;
  padding-inline: var(--space-12) var(--space-8);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--language-select-bg);
  box-shadow: inset 0 0 0 1px var(--_line, var(--language-select-border));
  color: var(--language-select-fg);
  font: var(--font-regular) var(--body-xs-size) / var(--body-xs-lh) var(--font-sans);
  letter-spacing: var(--tracking);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.zg-language-select > .zg-icon { --zg-icon-size: var(--icon-sm); color: var(--icon-default); }
.zg-language-select > .zg-language-select__chevron { --zg-icon-size: var(--icon-xs); transition: transform var(--duration-fast) var(--ease-standard); }
.zg-language-select:hover:not([aria-expanded="true"]) { --_line: var(--language-select-border-hover); color: var(--language-select-fg-hover); }
.zg-language-select[aria-expanded="true"] { --_line: var(--select-border-open); color: var(--language-select-fg-hover); }
.zg-language-select[aria-expanded="true"] > .zg-language-select__chevron { transform: rotate(180deg); }
.zg-language-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--language-select-border), var(--focus-ring); }

/* the globe only — always (--compact), and on a phone */
.zg-language-select--compact { justify-content: center; width: var(--language-select-height); padding: 0; }
.zg-language-select--compact > :not(.zg-icon--earth) { display: none; }
@media (max-width: 599px) {
  .zg-language-select { justify-content: center; width: var(--language-select-height); padding: 0; }
  .zg-language-select > :not(.zg-icon--earth) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zg-language-select, .zg-language-select > .zg-language-select__chevron { transition: none; }
}