/**
 * Furigana Toggle
 *
 * 切り替えボタンとルビの表示・非表示のスタイル。
 * 色などは CSS 変数で変更できる。
 * ダークの配色は、設定の「ボタンの配色」に応じて PHP 側がインラインの CSS で足す（1.8.0 以降）。
 */

/* 変更用の CSS 変数 */
:root {
	--ft-border-color: #ccc;
	--ft-bg-color: #f7f7f7;
	--ft-text-color: #222;
	--ft-focus-color: #4da3ff;
	--ft-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	--ft-hover-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	--ft-transition: box-shadow 0.2s ease;
}

/*
 * オフのときは、ルビ（と代替表示の括弧）を隠す。
 * 1.6.0 から <rp> は常時隠すのをやめた。ルビに対応したブラウザは <rp> を標準で隠す。
 * ルビに対応していないブラウザでは、オンのときに括弧として表示する必要がある。
 */
.furigana-off rt,
.furigana-off rp {
	display: none !important;
}

/* ボタンの基本スタイル */
.furigana-toggle {
	font: inherit;
	padding: 0.4em 0.9em;
	border: 1px solid var(--ft-border-color);
	border-radius: 0.6em;
	background: var(--ft-bg-color);
	color: var(--ft-text-color);
	cursor: pointer;
	/* 幅の狭い場所（メニューなど）でも、文言を1行に保つ。 */
	white-space: nowrap;
	box-shadow: var(--ft-shadow);
	transition: var(--ft-transition);
}

/* ボタンにマウスを重ねたとき */
.furigana-toggle:hover {
	box-shadow: var(--ft-hover-shadow);
}

/* ボタンにフォーカスがあるとき */
.furigana-toggle:focus {
	outline: 2px solid var(--ft-focus-color);
	outline-offset: 2px;
}

/* ボタンの文言 */
.furigana-toggle .ft-label {
	color: inherit;
	background: none;
}

/* 状態の表示 */
.furigana-toggle .ft-state {
	margin-left: 0.5em;
	font-weight: 600;
}

/* フローティングボタンの配置 */
#furiganaToggleFab {
	position: fixed;
	z-index: 9999;
	/* 位置はインラインの CSS で指定する */
}

/* 非表示にするためのクラス */
.furigana-toggle.hidden {
	display: none !important;
}

/*
 * メニュー項目（クラシックメニューとナビゲーションブロック）の中のボタン。
 * menu-item--furigana-toggle はテーマ制作者が識別に使うためのクラスでもある。
 * 文言と状態を1行にそろえて上下の中央に置き、行送りはメニューに合わせる。
 */
.menu-item--furigana-toggle .furigana-toggle {
	display: inline-flex;
	align-items: center;
	line-height: inherit;
}

/* 印刷物にはボタンを出さない。ルビの表示は、そのときのオン／オフに従う。 */
@media print {
	.furigana-toggle {
		display: none !important;
	}
}