/**
 * GTranslate ウィジェットの一覧がヘッダーを押し広げる問題の修正
 *
 * 対象:
 *   Nice dropdown with flags（js/dwf.js）… .gt_switcher > .gt_option
 *   Float                   （js/float.js）… .gt_float_switcher > .gt_options
 *
 * 原因:
 *   一覧が position:relative のまま文書フローに乗っているため、
 *   開くと周囲のレイアウト（ヘッダーの幅・高さ）を押し広げる。
 *   さらに親要素が overflow:hidden のため、単に absolute にすると一覧が切れる。
 *
 * 対策:
 *   JS（acot-layout-fix.js）が各ウィジェットに次の属性を付け、それに応じて一覧を重ねて表示する。
 *     data-acot-open … 実際に開く方向（top / bottom / left / right）。
 *                     上下開きは設定にかかわらず下を優先し、下に収まらない場合だけ上になる（判定は JS）
 *     data-acot-mode … absolute（通常）/ fixed（祖先に overflow が visible 以外の要素がある場合）
 *   JS がアニメーションに使う display / height には触れない。
 *   属性が付くまでは何も変えない（本家の見た目のまま）。
 *
 * !important を使う理由:
 *   ウィジェットは実行時に <style> を後から差し込み、クラス名も動的に生成するため、
 *   詳細度でも出現順でも勝てない。また JS がインラインで書き込む max-width にも勝つ必要がある。
 */

/* =====================================================================
 * 共通
 * ===================================================================== */

/* 親を重ね表示の基準にし、はみ出しを許可する */
.gt_switcher[data-acot-mode],
.gt_float_switcher[data-acot-mode] {
  position: relative !important;
  overflow: visible !important;
}

/*
 * Nice dropdown with flags の一覧の枠線。
 * 本家は GTranslate の設定上の開く方向の側（上開きなら上）にだけ枠線を付ける。
 * JS が設定と反対に開いた場合、そのままではボタンから遠い側の枠線が欠け、
 * ボタンに接する側が二重線になるため、実際に開いた方向に合わせて付け直す。
 * 色は JS が本家の左の枠線の色を変数で渡す。
 */
.gt_switcher[data-acot-mode][data-acot-open="bottom"] > .gt_option {
  border-top-width: 0 !important;
  border-bottom: 1px solid var(--acot-border-color, currentColor) !important;
}

.gt_switcher[data-acot-mode][data-acot-open="top"] > .gt_option {
  border-bottom-width: 0 !important;
  border-top: 1px solid var(--acot-border-color, currentColor) !important;
}

/* Float の一覧は親の外に出ると親の背景と影を失うため、同じものを引き継ぐ */
.gt_float_switcher[data-acot-mode] > .gt_options {
  background-color: inherit !important;
  box-shadow: inherit !important;
  border-radius: inherit !important;
}

/*
 * 左右開きの幅。
 * 本家 JS は開くたびに「親の幅 - 自分の幅 - 1」を max-width に書き込むが、
 * 一覧を重ね表示にすると親の幅がボタンの幅と等しくなり、結果が -1px になって一覧が潰れる。
 * そこで JS が「開く方向の画面内の空き幅」を変数に設定して上書きする。
 */
.gt_float_switcher[data-acot-open="left"] > .gt_options,
.gt_float_switcher[data-acot-open="right"] > .gt_options {
  max-width: var(--acot-max-width, 50vw) !important;
}

/* =====================================================================
 * absolute モード（通常）
 *   親（ウィジェット自身）を基準に、ボタンの隣へ重ねる
 * ===================================================================== */

.gt_switcher[data-acot-mode="absolute"] > .gt_option,
.gt_float_switcher[data-acot-mode="absolute"] > .gt_options {
  position: absolute !important;
}

.gt_switcher[data-acot-mode="absolute"][data-acot-open="bottom"] > .gt_option,
.gt_float_switcher[data-acot-mode="absolute"][data-acot-open="bottom"] > .gt_options {
  top: 100% !important;
  left: 0 !important;
}

.gt_switcher[data-acot-mode="absolute"][data-acot-open="top"] > .gt_option,
.gt_float_switcher[data-acot-mode="absolute"][data-acot-open="top"] > .gt_options {
  bottom: 100% !important;
  left: 0 !important;
}

.gt_float_switcher[data-acot-mode="absolute"][data-acot-open="right"] > .gt_options {
  top: 0 !important;
  left: 100% !important;
}

.gt_float_switcher[data-acot-mode="absolute"][data-acot-open="left"] > .gt_options {
  top: 0 !important;
  right: 100% !important;
}

/* 上下開きの Float は、一覧の幅を最低でもボタンの幅にそろえる */
.gt_float_switcher[data-acot-mode="absolute"][data-acot-open="bottom"] > .gt_options,
.gt_float_switcher[data-acot-mode="absolute"][data-acot-open="top"] > .gt_options {
  min-width: 100% !important;
}

/*
 * 上下開きの一覧の寄せ方向。
 * 一覧がボタンより広いとき、ボタンが画面の右半分にあると一覧が画面の右外へはみ出す。
 * そこで JS が data-acot-align="right" を付けた場合は、一覧の右端をボタンの右端にそろえる。
 * 開く方向の規則より後に置き、同じ詳細度で上書きする。
 */
.gt_switcher[data-acot-mode="absolute"][data-acot-align="right"] > .gt_option,
.gt_float_switcher[data-acot-mode="absolute"][data-acot-align="right"] > .gt_options {
  left: auto !important;
  right: 0 !important;
}

/* =====================================================================
 * fixed モード（祖先の overflow で一覧が切れる場合）
 *   画面を基準にし、JS がボタンの位置から座標を計算して変数に設定する。
 *   position:fixed は祖先の overflow:hidden に切り取られない。
 * ===================================================================== */

.gt_switcher[data-acot-mode="fixed"] > .gt_option,
.gt_float_switcher[data-acot-mode="fixed"] > .gt_options {
  position: fixed !important;
  top: var(--acot-top, auto) !important;
  bottom: var(--acot-bottom, auto) !important;
  left: var(--acot-left, auto) !important;
  right: var(--acot-right, auto) !important;
}

/*
 * 本家 Float の一覧は transition:all のため、JS が座標を更新するたびに位置が 0.8 秒かけて動き、
 * スクロールに対して一覧が遅れてずれる。
 * 開閉アニメーション（opacity / transform）だけを残し、位置の transition を止める。
 */
.gt_float_switcher[data-acot-mode="fixed"] > .gt_options {
  transition-property: opacity, transform !important;
}

/* fixed では min-width:100% が画面幅を指してしまうため、ボタンの幅を変数で渡す */
.gt_float_switcher[data-acot-mode="fixed"][data-acot-open="bottom"] > .gt_options,
.gt_float_switcher[data-acot-mode="fixed"][data-acot-open="top"] > .gt_options {
  min-width: var(--acot-min-width, auto) !important;
}

/* =====================================================================
 * 長い言語名（Nice dropdown with flags）
 *
 * 本家はウィジェットの幅を国旗サイズごとに固定（163 / 173 / 193 / 223px）し、
 * .gt_switcher に line-height:0 を指定している。
 * そのため「Chinese (Traditional)」のような長い言語名は折り返し、
 * 行の高さが 0 のまま2行目が次の行に重なる（ボタンでは枠からはみ出して切れる）。
 *
 * 対策:
 *   折り返し自体をやめて1行で表示する。
 *   ボタンは幅を本家どおり固定したまま、はみ出す名前を末尾「…」で省略する（ヘッダーの幅を変えないため）。
 *   一覧は最長の言語名が1行で収まる幅に広げる（重ねて表示するので周囲は押さない）。
 * ===================================================================== */

.gt_switcher[data-acot-mode] a {
  white-space: nowrap !important;
}

/*
 * ボタン。
 * 本家は content-box で「幅 = ウィジェット幅 - 左右余白 - 左右枠線」を指定しているため、
 * border-box の 100% に置き換えて外寸を変えずに右余白を足せるようにする。
 * 右余白は、矢印（::after、絶対配置）の下に文字が潜らないよう JS が実測して変数で渡す。
 */
.gt_switcher[data-acot-mode] > .gt_selected a {
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-right: var(--acot-button-padding-right, 30px) !important;
}

/* 一覧。幅を自動にして最長の言語名に合わせ、最低でもボタンの幅にそろえる */
.gt_switcher[data-acot-mode] > .gt_option {
  box-sizing: border-box !important;
  width: auto !important;
}

.gt_switcher[data-acot-mode="absolute"] > .gt_option {
  min-width: 100% !important;
}

/* fixed では 100% が画面幅を指してしまうため、ボタンの幅を変数で渡す */
.gt_switcher[data-acot-mode="fixed"] > .gt_option {
  min-width: var(--acot-min-width, auto) !important;
}