/* ==========================================================================
   mxw-lang-switcher — the floor under the language switcher
   ==========================================================================

   The switcher's markup comes from the framework (MoXoW core/pagedesc.xsl
   and core/webpage-components.xsl), and so do the constraints below: each
   rule here is a consequence of what that markup contains, not a design
   decision. Four sheets had grown their own copy of these six
   declarations, in four wordings, and a change to any of them meant four
   edits — which is how this file came to exist.

   What is NOT here: colour, spacing, weight, how the current language is
   marked, whether the names are visible. Those are the site's, and belong
   in the site's own sheet, which sits in a later layer and overrides
   anything here.

   Shipped with the framework and asked for by name:
   <m:framework mxw="lang-switcher"/>. No .js beside it -- the
   switcher is server-rendered links with nothing to script; see
   README.md in this directory for what that means for the contract.
   ========================================================================== */

@layer mxw {

  .mxw-lang-switcher {
    /* The framework emits a <ul>; a switcher is a row of choices, not a
       document list. Sites decide the direction and the spacing. */
    padding: 0;

    & a {
      /* Flag and name are emitted as SIBLINGS WITH NOTHING BETWEEN THEM,
         deliberately: in a flex container an ordinary space is discarded,
         and a no-break space survives only as an anonymous flex item of
         whatever width the font happens to give. So the separation has to
         be a gap, which means the anchor has to be a flex container. */
      display: inline-flex;
      gap: 0.35em;

      /* Puts the flag on the text's optical centre. Left to the default it
         sits on the baseline and rides low beside a name with no
         descender. */
      align-items: center;
    }

    /* A vector flag has to be told how big it is. The SVG sets ship
       width="900" height="600" on the root element, which an <img> takes
       as the intrinsic size: unstyled, the flag lays out 900x600 and the
       page overflows horizontally (measured in Chromium). The raster sets
       are 18x12 and need nothing, hence the attribute selector.

       em, not lh: the flag is an icon belonging to the text beside it, so
       it tracks that text's size and nothing else — lh would tie it to the
       line box, which belongs to the paragraph. Width follows each flag's
       own ratio, which runs from 1:1 (Switzerland) to 75:18 (Qatar). */
    & img[src$=".svg"] {
      block-size: 1em;
      inline-size: auto;
    }
  }

} /* @layer mxw */