/*
 * 언어 선택기 — 헤더 버튼에 "지구본 + 지금 언어 코드" 를 나란히 놓는다.
 * 마크업은 overrides/partials/alternate.html 에 있다.
 */

/* 테마의 헤더 버튼은 아이콘 하나만 담는 inline-block 이다. 라벨을 옆에 붙이려고 flex 로 바꾼다.
   `.md-header__button:not([hidden])` 과 특이도를 맞추려고 클래스를 두 개 겹쳐 적는다. */
.md-select--lang .md-select__button.md-header__button {
  align-items: center;
  display: flex;
  gap: 0.2rem;
  width: auto;
}

.md-select__current {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* 목록에서도 지금 보고 있는 언어를 알아볼 수 있게 한다. */
.md-select__link[aria-current="true"] {
  font-weight: 700;
}

/* 좁은 화면에서는 코드를 접는다. 폭이 모자라 사이트 이름이 잘리기 때문이다.
   지구본만 남아도 눌러보면 지금 언어가 목록에 굵게 표시된다. */
@media screen and (max-width: 29.9375em) {
  .md-select__current {
    display: none;
  }
}