/* THE LANGUAGE SWITCH'S LOOK -- `components/lang_switch.html`, linked once
   from the page's head by `lang_switch_assets()`.

   IT SITS IN SOMEBODY ELSE'S BAR, so it takes the bar's type and colour
   (`font: inherit; color: inherit`) and adds no box of its own until it is
   opened. Every colour, the radius, the shadow (`--lift`) and the pace are
   custom properties `/brand.css` emits, swapped under `prefers-color-scheme:
   dark` there -- no literal colour here. A product restyles it by class.

   A TAP TARGET IS 2.75rem TALL, the inline button and every row of the
   panel alike. Motion -- the chevron turning, the panel fading in -- only
   for somebody who did not ask for less of it. */

.lang-switch {
  position: relative;
  display: inline-block;
}

.lang-switch-inline {
  margin: 0;
  display: inline-flex;
}

/* THE ONE-TAP BUTTON IS UNDERLINED AT REST, as the bar's links are: on a
   phone, with no hover, a bare word among them reads as plain text. */
.lang-switch-inline .lang-switch-option {
  text-decoration: underline;
}

.lang-switch-option,
.lang-switch-toggle {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  min-height: 2.75rem;
  padding: .5rem .75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: var(--radius);
  text-underline-offset: .2em;
}

.lang-switch-toggle {
  list-style: none;
  font-weight: 600;
  letter-spacing: .02em;
  user-select: none;
}

.lang-switch-toggle::-webkit-details-marker {
  display: none;
}

/* Hover only where there is hover: a tapped control must not look stuck. */
@media (hover: hover) {
  .lang-switch-option:hover,
  .lang-switch-toggle:hover {
    text-decoration: underline;
  }
}

.lang-switch-option:focus-visible,
.lang-switch-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.lang-switch-chevron,
.lang-switch-check {
  flex: none;
}

/* ── the panel (three languages or more) ───────────────────────────────── */

.lang-switch-panel {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  z-index: 20;
  min-width: 12rem;
  max-width: calc(100vw - 2rem);
  margin: .25rem 0 0;
  padding: .25rem 0;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--lift);
}

.lang-switch-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lang-switch-panel .lang-switch-option,
.lang-switch-current {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  text-align: start;
  border-radius: 0;
  overflow-wrap: anywhere;
}

.lang-switch-panel .lang-switch-option:focus-visible {
  outline-offset: -3px;
}

@media (hover: hover) {
  .lang-switch-panel .lang-switch-option:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }
}

.lang-switch-current {
  font-weight: 600;
  cursor: default;
}

.lang-switch-current .lang-switch-check {
  color: var(--primary);
}

@media (prefers-reduced-motion: no-preference) {
  .lang-switch-chevron {
    transition: rotate var(--pace) var(--ease);
  }

  .lang-switch[open] .lang-switch-chevron {
    rotate: 180deg;
  }

  .lang-switch[open] .lang-switch-panel {
    animation: lang-switch-in var(--pace) var(--ease);
  }
}

@keyframes lang-switch-in {
  from {
    opacity: 0;
    translate: 0 -.25rem;
  }
}

/* Said to a screen reader, not shown: "Taal: " before the visible "NL". */
.lang-switch .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}