.tree-filter {
	font - family: Arial, sans - serif;
	color: #333;
	margin: 20px;
}

.tree-filter>div {
	margin - bottom: 5px;
}

.tree-filter span {
	display: flex;
	align - items: center;
	cursor: pointer;
	padding: 5px 10px;
	border - radius: 3px;
}

.tree-filter span::before {
	content: '';
	display: inline - block;
	width: 0;
	height: 0;
	border - left: 5px solid transparent;
	border - right: 5px solid transparent;
	border - bottom: 5px solid #333;
	margin - right: 5px;
	transform: translateY(1px);
	transition: transform 0.2s ease - in - out;
}

.tree-filter span.collapsed::before {
	transform: rotate(-90deg) translateY(1px);
}

.tree-filter ul {
	list - style - type: none;
	margin: 0;
	padding - left: 20px;
}

.tree-filter li {
	cursor: pointer;
	padding: 5px 10px;
	border - radius: 3px;
	transition: background - color 0.2s ease - in - out;
}

.tree-filter li:hover {
	background - color: #f0f0f0;
}

.tree-filter li.selected {
	background - color: #007bff;
	color: white;
}