/* =========================================
   LANGUAGE SWITCHER
========================================= */

.language-switcher {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    4px;

  border:
    1px solid
    var(--line);

  border-radius:
    10px;

  background:
    rgba(255, 255, 255, .85);

}


.language-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  min-width:
    46px;

  height:
    34px;

  padding:
    0
    7px;

  border:
    0;

  border-radius:
    7px;

  color:
    var(--muted);

  background:
    transparent;

  font-size:
    .72rem;

  font-weight:
    800;

}


.language-button span {
  font-size: .95rem;
}


.language-button:hover {

  color:
    var(--ink);

  background:
    var(--surface);

}


.language-button.active {

  color:
    white;

  background:
    var(--red);

}


/* =========================================
   TABLET / MOBILE
========================================= */

@media (max-width: 760px) {

  .language-switcher {

    gap:
      2px;

    padding:
      3px;

  }


  .language-button {

    min-width:
      40px;

    height:
      32px;

    padding:
      0
      5px;

  }


  .language-button strong {
    font-size: .68rem;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .language-button {

    min-width:
      34px;

    width:
      34px;

    padding:
      0;

  }


  .language-button strong {
    display:
      none;
  }

}