/* ==========================================================================
   AI Translate - language switcher
   ========================================================================== */

.aitrans-switcher{
	--aitrans-bg:#fff;
	--aitrans-bg-hover:#f3f4f5;
	--aitrans-fg:#1d2327;
	--aitrans-border:rgba(0,0,0,.16);
	--aitrans-radius:8px;
	--aitrans-font:16px;
	--aitrans-pad-y:.62em;
	--aitrans-pad-x:.95em;
	--aitrans-icon:1.25em;
	--aitrans-gap:.55em;
	--aitrans-shadow:none;

	position:relative;
	display:inline-block;
	font-size:var(--aitrans-font);
	line-height:1.35;
	font-family:inherit;
	z-index:1;
}
.aitrans-switcher *{box-sizing:border-box}

/* ---------------------------------------------------------------- sizes */
.aitrans-size-small{--aitrans-font:14px;--aitrans-pad-y:.5em;--aitrans-pad-x:.8em;--aitrans-icon:1.1em}
.aitrans-size-medium{--aitrans-font:16px;--aitrans-pad-y:.62em;--aitrans-pad-x:.95em;--aitrans-icon:1.25em}
.aitrans-size-large{--aitrans-font:18px;--aitrans-pad-y:.72em;--aitrans-pad-x:1.15em;--aitrans-icon:1.4em}

/* --------------------------------------------------------------- themes */
.aitrans-theme-light{--aitrans-bg:#fff;--aitrans-bg-hover:#f2f3f4;--aitrans-fg:#1d2327;--aitrans-border:rgba(0,0,0,.16)}
.aitrans-theme-dark{--aitrans-bg:#1d2327;--aitrans-bg-hover:#2c3338;--aitrans-fg:#fff;--aitrans-border:rgba(255,255,255,.22)}
.aitrans-theme-outline{--aitrans-bg:transparent;--aitrans-bg-hover:rgba(0,0,0,.06);--aitrans-fg:currentColor;--aitrans-border:currentColor}
.aitrans-has-shadow{--aitrans-shadow:0 2px 10px rgba(0,0,0,.16)}

/* --------------------------------------------------------- label pieces */
/* 国旗は同梱SVG。白地の旗（日本など）も見えるよう薄い枠を付ける */
.aitrans-switcher img.aitrans-flag{
	width:calc(var(--aitrans-icon) * 1.34);
	height:calc(var(--aitrans-icon) * 1.005);
	flex:none;
	object-fit:cover;
	border-radius:2px;
	box-shadow:0 0 0 1px rgba(0,0,0,.14);
	vertical-align:middle;
}
.aitrans-theme-dark img.aitrans-flag{box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.aitrans-switcher .aitrans-code{
	font-size:.74em;
	font-weight:700;
	letter-spacing:.04em;
	line-height:1;
	padding:.32em .45em;
	border-radius:calc(var(--aitrans-radius) / 2);
	background:currentColor;
	display:inline-block;
	min-width:2.5em;
	text-align:center;
}
/* 背景に currentColor を使い、文字だけ切り抜いて見せる */
.aitrans-switcher .aitrans-code{color:inherit;background:rgba(127,127,127,.18)}
.aitrans-switcher .aitrans-name{white-space:nowrap}

/* アイコンと言語名は、パソコン用とスマートフォン用の両方をHTMLに出したうえで
   どれを見せるかをここで決める。既定はすべて非表示。 */
.aitrans-switcher .aitrans-flag,
.aitrans-switcher .aitrans-code,
.aitrans-switcher .aitrans-name-full,
.aitrans-switcher .aitrans-name-short{display:none}
.aitrans-icon-flag .aitrans-flag{display:inline-block}
.aitrans-icon-code .aitrans-code{display:inline-block}
.aitrans-names-full .aitrans-name-full{display:inline}
.aitrans-names-short .aitrans-name-short{display:inline}

/* ------------------------------------------------------------- dropdown */
.aitrans-switcher .aitrans-toggle{
	display:inline-flex;
	align-items:center;
	gap:var(--aitrans-gap);
	margin:0;
	padding:var(--aitrans-pad-y) var(--aitrans-pad-x);
	min-height:44px;
	font:inherit;
	color:var(--aitrans-fg);
	background:var(--aitrans-bg);
	border:1px solid var(--aitrans-border);
	border-radius:var(--aitrans-radius);
	box-shadow:var(--aitrans-shadow);
	cursor:pointer;
	transition:background-color .15s,border-color .15s;
}
.aitrans-switcher .aitrans-toggle:hover,
.aitrans-switcher .aitrans-toggle:focus-visible{background:var(--aitrans-bg-hover)}
.aitrans-switcher .aitrans-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.aitrans-switcher .aitrans-current{display:inline-flex;align-items:center;gap:var(--aitrans-gap)}
.aitrans-switcher .aitrans-caret{width:.7em;height:.5em;flex:none;opacity:.65;transition:transform .18s}
.aitrans-switcher.is-open .aitrans-caret{transform:rotate(180deg)}

.aitrans-switcher .aitrans-list{list-style:none;margin:0;padding:0}
.aitrans-style-dropdown .aitrans-list{
	position:absolute;
	left:0;
	top:calc(100% + 6px);
	min-width:100%;
	max-height:min(60vh,420px);
	overflow:auto;
	padding:4px;
	background:var(--aitrans-bg);
	border:1px solid var(--aitrans-border);
	border-radius:var(--aitrans-radius);
	box-shadow:0 8px 26px rgba(0,0,0,.18);
	display:none;
	z-index:2;
}
.aitrans-style-dropdown.is-open .aitrans-list{display:block}
.aitrans-style-dropdown .aitrans-list li{margin:0;padding:0}
.aitrans-style-dropdown .aitrans-list a{
	display:flex;
	align-items:center;
	gap:var(--aitrans-gap);
	padding:var(--aitrans-pad-y) var(--aitrans-pad-x);
	min-height:44px;
	color:var(--aitrans-fg);
	text-decoration:none;
	border-radius:calc(var(--aitrans-radius) - 2px);
	white-space:nowrap;
}
.aitrans-style-dropdown .aitrans-list a:hover,
.aitrans-style-dropdown .aitrans-list a:focus-visible{background:var(--aitrans-bg-hover)}
.aitrans-style-dropdown .aitrans-list li.is-current a{font-weight:700}

/* 画面下部に置いたときは上向きに開く */
.aitrans-open-up .aitrans-style-dropdown .aitrans-list{top:auto;bottom:calc(100% + 6px)}
.aitrans-d-bottom-right .aitrans-style-dropdown .aitrans-list,
.aitrans-d-top-right .aitrans-style-dropdown .aitrans-list{left:auto;right:0}

/* --------------------------------------------------------- inline/list */
ul.aitrans-switcher{list-style:none;margin:0;padding:0}
.aitrans-style-inline{display:flex;flex-wrap:wrap;gap:6px}
.aitrans-style-list{display:flex;flex-direction:column;gap:4px}
.aitrans-style-inline li,.aitrans-style-list li{margin:0;padding:0;list-style:none}
.aitrans-style-inline a,.aitrans-style-list a{
	display:inline-flex;
	align-items:center;
	gap:var(--aitrans-gap);
	padding:var(--aitrans-pad-y) var(--aitrans-pad-x);
	min-height:44px;
	color:var(--aitrans-fg);
	background:var(--aitrans-bg);
	border:1px solid var(--aitrans-border);
	border-radius:var(--aitrans-radius);
	box-shadow:var(--aitrans-shadow);
	text-decoration:none;
	transition:background-color .15s;
}
.aitrans-style-inline a:hover,.aitrans-style-list a:hover{background:var(--aitrans-bg-hover)}
.aitrans-style-inline li.is-current a,.aitrans-style-list li.is-current a{font-weight:700;border-color:currentColor}

/* メニュー内に入れた場合は余計な枠を出さない */
.aitrans-in-menu{--aitrans-bg:transparent;--aitrans-border:transparent;--aitrans-shadow:none;gap:2px}
.aitrans-in-menu a{min-height:0;padding:.35em .5em}

/* -------------------------------------------------------------- floating */
.aitrans-floating{
	--aitrans-offset-x:20px;
	--aitrans-offset-y:20px;
	--aitrans-offset-x-m:14px;
	--aitrans-offset-y-m:14px;
	position:fixed;
	z-index:99998;
}
@media (min-width:783px){
	.aitrans-d-bottom-right{right:var(--aitrans-offset-x);bottom:var(--aitrans-offset-y)}
	.aitrans-d-bottom-left{left:var(--aitrans-offset-x);bottom:var(--aitrans-offset-y)}
	.aitrans-d-top-right{right:var(--aitrans-offset-x);top:var(--aitrans-offset-y)}
	.aitrans-d-top-left{left:var(--aitrans-offset-x);top:var(--aitrans-offset-y)}
	.aitrans-hide-desktop{display:none !important}
}
@media (max-width:782px){
	.aitrans-m-bottom-right{right:var(--aitrans-offset-x-m);bottom:var(--aitrans-offset-y-m);left:auto;top:auto}
	.aitrans-m-bottom-left{left:var(--aitrans-offset-x-m);bottom:var(--aitrans-offset-y-m);right:auto;top:auto}
	.aitrans-m-top-right{right:var(--aitrans-offset-x-m);top:var(--aitrans-offset-y-m);left:auto;bottom:auto}
	.aitrans-m-top-left{left:var(--aitrans-offset-x-m);top:var(--aitrans-offset-y-m);right:auto;bottom:auto}
	.aitrans-hide-mobile{display:none !important}

	.aitrans-m-top-right .aitrans-style-dropdown .aitrans-list,
	.aitrans-m-top-left .aitrans-style-dropdown .aitrans-list{top:calc(100% + 6px);bottom:auto}
	.aitrans-m-bottom-right .aitrans-style-dropdown .aitrans-list,
	.aitrans-m-bottom-left .aitrans-style-dropdown .aitrans-list{top:auto;bottom:calc(100% + 6px)}
	.aitrans-m-bottom-left .aitrans-style-dropdown .aitrans-list,
	.aitrans-m-top-left .aitrans-style-dropdown .aitrans-list{left:0;right:auto}
	.aitrans-m-bottom-right .aitrans-style-dropdown .aitrans-list,
	.aitrans-m-top-right .aitrans-style-dropdown .aitrans-list{left:auto;right:0}

	/* スマートフォンだけ見た目を変える指定。
	   出す側と消す側を必ず対にしないと、パソコン用の表示が残ってしまう。 */
	.aitrans-m-size-small{--aitrans-font:14px;--aitrans-pad-y:.5em;--aitrans-pad-x:.8em;--aitrans-icon:1.1em}
	.aitrans-m-size-medium{--aitrans-font:16px;--aitrans-pad-y:.62em;--aitrans-pad-x:.95em;--aitrans-icon:1.25em}
	.aitrans-m-size-large{--aitrans-font:18px;--aitrans-pad-y:.72em;--aitrans-pad-x:1.15em;--aitrans-icon:1.4em}

	.aitrans-m-names-none .aitrans-name-full,
	.aitrans-m-names-none .aitrans-name-short{display:none}
	.aitrans-m-names-full .aitrans-name-full{display:inline}
	.aitrans-m-names-full .aitrans-name-short{display:none}
	.aitrans-m-names-short .aitrans-name-short{display:inline}
	.aitrans-m-names-short .aitrans-name-full{display:none}

	.aitrans-m-icon-none .aitrans-flag,
	.aitrans-m-icon-none .aitrans-code{display:none}
	.aitrans-m-icon-flag .aitrans-flag{display:inline-block}
	.aitrans-m-icon-flag .aitrans-code{display:none}
	.aitrans-m-icon-code .aitrans-code{display:inline-block}
	.aitrans-m-icon-code .aitrans-flag{display:none}
}

@media (prefers-reduced-motion:reduce){
	.aitrans-switcher *{transition:none !important}
}