/*
 * Language switch: a gooey blob that flows between EN and TH.
 *
 * Deliberately NOT named `.toggle` -- main.css already styles `.toggle` for the
 * dark/light switcher this sits beside, and reusing the name would pull in a
 * grid layout meant for a different control.
 *
 * The track never changes with the SWITCH position -- neither language is an
 * "off" state, and greying out English would read as one. It does change with
 * the THEME: a neutral track in light mode, where full orange shouted next to
 * the rest of the header, and the primary orange in dark mode, where a grey
 * track would disappear into the bar.
 *
 * Both label colours move with the track, since one sits on the white blob and
 * the other on the track itself.
 */

.lang-toggle-container {
  --lang-toggle-track: var(--at-neutral-200, #cdcccc);
  --lang-toggle-label-active: var(--at-neutral-900, #1d1d1d);
  --lang-toggle-label-idle: var(--at-neutral-500, #585959);
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 292 / 142;
  height: 30px;
  line-height: 0;
}

[data-bs-theme="dark"] .lang-toggle-container {
  --lang-toggle-track: var(--at-theme-primary, #f0460e);
  --lang-toggle-label-active: var(--at-theme-primary, #f0460e);
  --lang-toggle-label-idle: rgba(255, 255, 255, 0.75);
}

/* Transparent, but covers the whole control -- this is the real click target. */
.lang-toggle-input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 999px;
  cursor: pointer;
}

.lang-toggle-input:focus-visible {
  outline: 2px solid var(--at-theme-primary, #f0460e);
  outline-offset: 3px;
}

.lang-toggle {
  width: 100%;
  height: 100%;
  /* The blur bleeds past the viewBox; without this the blob's ends get cut. */
  overflow: visible;
}

.lang-toggle-background {
  fill: var(--lang-toggle-track);
}

.lang-toggle-circle-center,
.lang-toggle-circle {
  fill: #fff;
  transform-origin: center;
  backface-visibility: hidden;
}

.lang-toggle-circle-center {
  transition: transform 0.6s;
}

.lang-toggle-input:checked + .lang-toggle .lang-toggle-circle-center {
  transform: translateX(150px);
}

.lang-toggle-circle {
  transition: transform 0.45s;
}

.lang-toggle-circle.left {
  transform: scale(1);
}

.lang-toggle-input:checked + .lang-toggle .lang-toggle-circle.left {
  transform: scale(0);
}

.lang-toggle-circle.right {
  transform: scale(0);
}

.lang-toggle-input:checked + .lang-toggle .lang-toggle-circle.right {
  transform: scale(1);
}

.lang-toggle-label {
  font-family: inherit;
  font-size: 48px; /* viewBox units -- about 10px once the SVG is scaled down */
  font-weight: 700;
  letter-spacing: -1px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  transition: fill 0.45s;
}

/* Sitting on the white blob. */
.lang-toggle-label[data-active="true"] {
  fill: var(--lang-toggle-label-active);
}

/* Sitting on the bare track. */
.lang-toggle-label[data-active="false"] {
  fill: var(--lang-toggle-label-idle);
}

@media (prefers-reduced-motion: reduce) {
  .lang-toggle-circle-center,
  .lang-toggle-circle,
  .lang-toggle-label {
    transition: none;
  }
}