/* Language toggle rendered inside Material's announce banner.
   Rendered on every page. The "other language" link comes from `lang_alt:`
   when the page declares it; otherwise it falls back to that language's home
   (EN pages -> /vi/, VI pages -> /). */

.lang-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: .7rem;
  line-height: 1.5;
}

.lang-switch__label {
  opacity: .85;
  white-space: nowrap;
}

.lang-switch__pill {
  display: inline-block;
  padding: .12rem .7rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.lang-switch__pill--active {
  background-color: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .85);
}

a.lang-switch__pill:hover,
a.lang-switch__pill:focus {
  background-color: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .85);
}

/* Keep the toggle compact and unobtrusive on small screens. */
@media screen and (max-width: 30em) {
  .lang-switch {
    font-size: .65rem;
    gap: .3rem;
  }
}