/**
 * サイト内検索の既定のスタイル
 *
 * 【これは何のためのものか】
 * 検索の動作に最低限必要な見た目だけを定義する。デザインを決めるものではない。
 * 入力候補は入力欄に重ねて表示する必要があり、背景が無いと下の文字と重なって読めない。
 * キーボードで選択中の候補は、見て分かる必要がある（JIS X 8341-3 の適合レベル AA）。
 *
 * 【テーマ側での扱い】
 * すべてテーマの CSS で上書きできる。!important も詳細度の高い指定も使っていない。
 * 読み込み順はプラグインが先、テーマが後になるため、同じ詳細度ならテーマが勝つ。
 * デザインに合わせて自由に変更してよい。
 */

/* ------------------------------------------------ 入力候補 */

.gp-search-suggest {
	position: absolute;
	z-index: 100;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #ccc;
	max-height: 20em;
	overflow-y: auto;
}

.gp-search-suggest__item {
	display: block;
	padding: 0.5em 0.75em;
	text-decoration: none;
	color: inherit;
}

.gp-search-suggest__item:hover {
	background: #f0f0f0;
}

/*
 * キーボードで選択中の候補。
 * 上下キーで移動したときに、どれを指しているかが分かる必要がある。
 * 色だけに頼らないよう、左端の線も併せて付ける。
 */
.gp-search-suggest__item.is-active {
	background: #e8f0fe;
	box-shadow: inset 3px 0 0 #1a4fa0;
}

/* ------------------------------------------------ JavaScript が動かない場合 */

.gp-search-fallback__list {
	list-style: none;
	padding: 0;
}

.gp-search-fallback__item {
	padding: 0.25em 0;
}

.gp-search-fallback__type {
	margin-left: 0.5em;
	font-size: 0.85em;
	opacity: 0.7;
}