/* "fav_cat_wnd.css" */
@charset "UTF-8";

#fav_cat_wnd.fltwnd {
	background-color:	white;
	border:				1px solid var(--color-gray-200);
	border-radius:		0.5rem;
	display:			none;
	height:				80vh;
	left:				50%;
	padding:			1rem;
	position:			fixed;
	top:				50%;
	transform:			translate(-50%, -50%);
	width:				800px;
	z-index:			10;
}
@media screen and (min-width:1px) and (max-width:800px) {
	#fav_cat_wnd.fltwnd {
		width:			calc(100% - 2rem);
	}
}

.fav_cat_wnd_header {
	align-items:			center;
	display:				flex;
	margin-bottom:			1rem;
}
/* ウィンドウタイトル */
#fav_cat_wnd .ttl {
	font-size:				1.2rem;
	font-weight:			600;
	margin-right:			auto;
}
.fav_cat_wnd_header .wnd_close_btn {
	background:				transparent;
	border:					none;
	border-radius:			0.25rem;
	color:					var(--color-gray-400);
	padding:				0.25rem 0.5rem;
	transition:				background 0.15s, color 0.15s;
}
.fav_cat_wnd_header .wnd_close_btn:hover {
	background-color:		var(--color-primary-100);
}
/* カテゴリーを絞り込むテキストボックス */
#fav_cat_search_input {
	border:					1px solid var(--color-gray-200);
	border-radius:			0.315rem;
	font-size:				1rem;
	margin-bottom:			0.5rem;
	padding:				0.5rem 0.75rem;
}
#fav_cat_search_input:forcus {
	outline:				2px solid var(--color-primary-400);
}

/* カテゴリー一覧 */
#fav_cat_wnd .fav_cat_ul {
	border:					1px solid var(--color-gray-400);
	height:					calc(100% - 15rem);
	overflow-y:				auto;
	scrollbar-width:		thin;
}

/* 親カテゴリー */
#fav_cat_wnd .prt {
	background-color:		var(--color-primary-100);
	font-weight:			600;
	line-height:			1.2;
	margin-top:				0.5rem;
	padding:				0.25rem 0.5rem;
	width:					100%;
}

/* 子カテゴリー */
#fav_cat_wnd .cld_ul {
	display:				flex;
	flex-direction:			column;
	gap:					0.5rem;
	padding:				0.5rem;
}
#fav_cat_wnd label {
	display:				block;
	width:					90%;
}
#fav_cat_wnd label.disabled {
	color:					var(--color-gray-300);
}
#fav_cat_wnd label:not(.disabled):hover {
	background-color:		rgb(var(--color-primary-100) / 0.5);
}

.checked_cat_header {
	align-items:			center;
	display:				flex;
	gap:					0.5rem;
	margin:					1rem 0 0.5rem 0;
}
.checked_cat_ttl {
	font-size:				0.875rem;
	font-weight:			600;
	color:					var(--color-gray-800);
}

/* カウントバッチ */
.count_badge {
	border-radius:			99px;
	font-size:				0.75rem;
	font-weight:			600;
	padding:				0.1875rem 0.625rem;
	color:					var(--color-gray-800);
	transition:				background 0.2s, color 0.2s, border-color 0.2s;
}
.count_badge.partial {
	color:					var(--color-success-muted);
}
.count_badge.full {
	color:					var(--color-error-bold);
}

/* 選択中のカテゴリー */
.checked_cat_cont {
	height:					3.5rem;
	padding:				0.5rem 0;
}
#fav_cat_wnd .tag {
	align-items:			center;
	background-color:		var(--color-primary-100);
	border:					1px solid var(--color-primary-300);
	border-radius:			1rem;
	color:					var(--color-primary-600);
	display:				inline-flex;
	font-weight:			600;
	margin-right:			0.25rem;
	padding:				0.25rem 0.5rem 0.25rem 1rem;
	width:					fit-content;
}
#fav_cat_wnd .tag .unchecked_btn {
	background-color:		transparent;
	border:					none;
	height:					100%;
}
@media screen and (min-width:1px) and (max-width:800px) {
	.checked_cat_cont {
		height:				4.5rem;
	}
	#fav_cat_wnd .tag {
		font-size:			0.875rem;
	}
}

/* 閉じるボタン、登録するボタン */
#fav_cat_wnd .btn_box {
	display:				flex;
	gap:					0.5rem;
	justify-content:		flex-end;
}
#fav_cat_reg_btn {
	background-color:		var(--color-primary-600);
	color:					var(--color-text-inverse);
}