/*
 * 言語切り替えボタン（EN / 日本語）。
 *
 * ヘッダーのアイコン列とドロワーの上部に置く。ヘッダー側は 768px 以下で
 * 消える（その幅ではナビ自体がドロワーへ移るため。CSS は置き場所ごとの
 * 修飾クラスで出し分ける）。
 *
 * 文字は Source Code Pro。ヘッダーのメニュー項目と同じ書体にして、
 * あとから足した部品に見えないようにする。
 */

.astra-lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
}

.astra-lang-switch__option {
  color: white;
  /* 選んでいない側は控えめに。押せることは分かるが主張はしない。 */
  opacity: 0.55;
  text-decoration: none;
  padding: 2px 0;
  transition: opacity 0.2s ease;
}

.astra-lang-switch__option:hover,
.astra-lang-switch__option:focus-visible {
  opacity: 1;
}

/* いま表示している言語。下線で「こちらを見ている」ことを示す。 */
.astra-lang-switch__option.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.astra-lang-switch__separator {
  color: white;
  opacity: 0.4;
}

/* --- ヘッダー（PC） --- */
/* アイコン列の一番左。検索アイコンの手前に並ぶ。 */
.astra-lang-switch--header {
  margin-right: 4px;
}

@media screen and (max-width: 768px) {
  /* この幅ではナビがドロワーへ移るので、ヘッダー側は出さない。
   * アイコンが4つ並んでいる列にこれ以上詰めると押し分けられなくなる。 */
  .astra-lang-switch--header {
    display: none;
  }
}

/* --- ドロワー（モバイル） --- */
/* 閉じるボタンとアイコン列の間。開いてすぐ目に入る位置に置く。 */
.astra-lang-switch--drawer {
  font-size: 1.4rem;
}

.astra-lang-switch--drawer .astra-lang-switch__option {
  /* 指で押す前提なので、当たり判定を広げる。 */
  padding: 8px 4px;
}