/* artinlenz.de language switch. Expects the page to define
   --accent, --text, --muted and --divider. */
:root{
  --lang-ease:cubic-bezier(.2,.7,.2,1);
  --lang-thumb-ms:380ms;
  --lang-fade-ms:220ms;
  --lang-on:#161826;
}
/* Same idea as the app controls on the site: the control shows what it is set to
   and what the other option is, with no menu to open. Two labels, one thumb. */
.lang{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;
  height:30px;padding:3px;border-radius:999px;
  border:1px solid var(--divider);isolation:isolate;
  background:color-mix(in srgb,var(--text) 5%,transparent);
}
.lang::before{
  content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;
  width:calc(50% - 3px);border-radius:999px;background:var(--accent);
  transition:transform var(--lang-thumb-ms) var(--lang-ease);
}
.lang[data-lang="en"]::before{transform:translateX(100%)}
.lang button{
  appearance:none;border:0;background:transparent;margin:0;padding:0 11px;
  font:inherit;font-size:11.5px;font-weight:600;letter-spacing:.08em;
  color:var(--muted);cursor:pointer;border-radius:999px;line-height:1;
  transition:color var(--lang-thumb-ms) ease;
}
.lang button[aria-pressed="true"]{color:var(--lang-on);cursor:default}
.lang button:not([aria-pressed="true"]):hover{color:var(--text)}
.lang button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Text fades a breath while the strings swap, so nothing flickers mid-sentence. */
[data-lang-fade]{transition:opacity var(--lang-fade-ms) ease}
body.lang-swap [data-lang-fade]{opacity:0}
@media (prefers-reduced-motion:reduce){
  .lang::before,.lang button,[data-lang-fade]{transition:none}
}