/* ============================================================================
   Language switcher: Armenian, English, Russian.

   Native names only. Never flags. A flag is a country, not a language, and
   Russian and Armenian are both read well outside their flags. Native names
   are also self-identifying: a Russian speaker finds "Русский" without being
   able to read the rest of the interface, which is the whole point.

   Armenian is the primary language of this house. On the aquascaping hub it
   is the reason the site exists. See each site's brand.json for its default.
   ========================================================================= */

@layer components {
  .lang {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--t-sm);
    letter-spacing: var(--tr-sm);
  }

  .lang a {
    display: inline-block;
    padding: var(--sp-1) var(--sp-2);
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--dur-1) var(--ease-standard),
                border-color var(--dur-1) var(--ease-standard);
  }
  .lang a:hover { color: var(--ink) }

  .lang a[aria-current="true"] {
    color: var(--ink);
    border-bottom-color: var(--accent);
    font-weight: var(--w-medium);
  }

  /* The separator is drawn, not typed, so it never lands in a screen reader
     or in a translation string. */
  .lang a + a { position: relative }
  .lang a + a::before {
    content: "";
    position: absolute;
    left: calc(var(--sp-1) * -1);
    top: 50%;
    translate: 0 -50%;
    width: 1px;
    height: 0.85em;
    background: var(--rule);
  }

  /* Armenian needs a little more line box than Latin at the same size.
     Set it on the element rather than globally so Latin is not loosened. */
  .lang a[lang="hy"] { line-height: 1.6 }

  /* NOT PUBLISHED YET, AND SAID SO RATHER THAN HIDDEN. A language that is coming is worth
     showing: an Armenian speaker who sees ՀԱՅ greyed knows the edition is planned and knows
     this is a house that intends to speak to them. A missing item tells them nothing.

     They are <span>, not <a>, because there is nowhere to go yet — a link that returns the
     page you are already on is a broken promise the browser cannot warn you about. When an
     edition ships the span becomes an anchor and the rules above take over with no change
     to the markup around it.

     English is current everywhere for now: the copy is written in English and a chooser that
     offers a language we have not finished would be offering an empty room. */
  .lang-current,
  .lang-soon {
    display: inline-block;
    padding: var(--sp-1) var(--sp-2);
  }

  .lang-current {
    color: var(--ink);
    font-weight: var(--w-medium);
    border-bottom: 1px solid var(--accent);
  }

  .lang-soon {
    color: var(--ink-4);          /* a non-text mark's weight, which is what this is */
    cursor: default;
  }

  /* Same drawn separator as between the links, so a mixed row of spans and anchors — which is
     exactly what this is until the other two editions ship — reads as one set. */
  .lang > * + *::before {
    content: "";
    position: absolute;
    left: calc(var(--sp-1) * -1);
    top: 50%;
    translate: 0 -50%;
    width: 1px;
    height: 0.85em;
    background: var(--rule);
  }
  .lang > * + * { position: relative }

  .lang [lang="hy"] { line-height: 1.6 }
}