/* The language picker.
 *
 * Almost nothing here. It sits in the theme's microwidget slot, so its color,
 * its type and the space around it are the theme's already - writing them again
 * would only mean a picker that stops matching the header the day somebody
 * changes the header. What is left is the arrangement, which the theme has no
 * opinion about. */

/* The room between one language and the next, where Theme Settings >
   Microwidgets > Language has been given a figure. Left alone it is the half em
   it always was. */
.dstr-pick{ display:inline-flex; align-items:center; gap:var(--ds-mw-lang-gap, .5em); }

/* EN / ES, side by side, with the one you are reading standing out. Opacity
   rather than a color of its own: it dims against whatever the header is,
   including a header that changes color over a photograph.

   A color can be picked for the current one on that same card. Where one has
   been it is used and the dimming of the others still stands - they are two
   separate answers to "which am I reading" and a site may want both. */
.dstr-inline .dstr-one{ text-decoration:none; opacity:.55; transition:opacity .15s ease; }
.dstr-inline .dstr-one:hover,
.dstr-inline .dstr-one:focus-visible{ opacity:1; }
.dstr-inline .dstr-one.is-on{ opacity:1; font-weight:600; color:var(--ds-mw-lang-on, inherit); }

/* A rule between them, drawn by the gap rather than by an element, so there is
   nothing extra in the markup for a screen reader to read out. */
.dstr-inline .dstr-one + .dstr-one{ padding-left:.6em; border-left:1px solid currentColor; border-left-color:color-mix(in srgb, currentColor 30%, transparent); }

.dstr-drop{ margin:0; }
.dstr-drop select{ font:inherit; color:inherit; }

/* Shown only where the select cannot submit itself. */
.dstr-drop .dstr-go{ font:inherit; }
.dstr-drop[data-dstr-ready] .dstr-go{ display:none; }