/* The language menu customize.py puts in the help center's header, in the look of its other
   header buttons (whyatwork/helpcenter's style.css: .lang, .theme). */

.lang-menu{position:relative}
.lang .flag,.lang-list .flag{width:20px;height:14px;flex:none;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px var(--line-2)}
.lang .chev{width:14px;height:14px;color:var(--ink-3);transition:transform .15s}
.lang[aria-expanded="true"]{background:var(--surface-2)}
.lang[aria-expanded="true"] .chev{transform:rotate(180deg)}

.lang-list{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;gap:2px;min-width:190px;padding:6px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.lang-list[hidden]{display:none}
.lang-list a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--ink-2);font-size:14px;font-weight:500}
.lang-list a:hover,.lang-list a:focus-visible{background:var(--surface-2);color:var(--ink);text-decoration:none;outline:none}
.lang-list a[aria-checked="true"]{color:var(--accent-ink)}
.lang-list .check{width:16px;height:16px;margin-left:auto;color:var(--sun-ink);visibility:hidden}
.lang-list a[aria-checked="true"] .check{visibility:visible}

/* On a phone the button shows only the flag (style.css already hides the code there). */
@media (max-width:640px){.lang .chev{display:none}}