.tree-view {
	list-style-type: none;
	padding-left: 20px;
}

.tree-view ul {
	list-style-type: none;
	margin-left: 20px;
	display: none; /* Hide child nodes by default */
	padding-inline-start: 20px;
}
.nav .tree-view ul {
	list-style-type: none;
	margin-left: 10px;
	display: none; /* Hide child nodes by default */
	padding-inline-start: 10px;
}

.nav .tree-view li {
	span.tree-leaf {
		margin-top: 5px;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: aliceblue;
	}
}

.tree-view .tree-node {
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
}

.tree-view .tree-node .icon {
	width: 16px;
	height: 16px;
	margin-right: 5px;
}

.tree-view .tree-branch::before {
	content: "▶"; /* Default collapsed icon */
	margin-right: 5px;
	display: inline-block;
	transform: rotate(0deg);
	transition: transform 0.2s ease;
}

.tree-view .tree-branch.expanded::before {
	content: "▶"; /* Expanded icon */
	transform: rotate(90deg);
}