/* ============================================================================
   LANGUAGE SWITCHER  -  figma `globe` 478:16381 (navigation 20:236)
   ----------------------------------------------------------------------------
   The navigation now carries the language control as a bare 24x24 globe in the
   Actions slot, replacing the "AR" / "EN" pill that used to sit next to the EU
   badge. The exported asset fills its path with a hard-coded #1D1D1B, which
   would be invisible on the dark surface, so it is applied as a mask over
   `currentColor` - the same technique as `.sh-arrow-icon` and `.sh-card-icon`.
   That keeps the exact exported geometry while the colour comes from whichever
   semantic token the bar has in force.

   GEOMETRY, straight from Figma: a 24x24 box (`--control-icon-size`) with the
   glyph filling it edge to edge. The globe is radially symmetric, so unlike the
   arrow it needs no RTL mirroring.
   ========================================================================= */

@layer theme, base, components, utilities;

@layer components {
  .sh-language-globe {
    display: block;
    flex: none;
    inline-size: var(--control-icon-size);
    block-size: var(--control-icon-size);
    background-color: currentColor;
    -webkit-mask-image: url("/assets/icons/globe-solid.svg");
    mask-image: url("/assets/icons/globe-solid.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
}