/* https://iamkate.com/code/tree-views/ */

.tree {
	--spacing: 1.6rem;
	--radius: 8px;
	line-height: 1.6;
}

.tree li {
	display: block;
	position: relative;
	padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul {
	margin-left: calc(var(--radius) - var(--spacing));
	padding-left: 0;
}

.tree ul li {
	border-left: 2px solid #ddd;
}

.tree ul li:last-child {
	border-color: transparent;
}

.tree ul li::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(var(--spacing) / -2);
	left: -2px;
	width: calc(var(--spacing) + 2px);
	height: calc(var(--spacing));
	border: solid #ddd;
	border-width: 0 0 2px 2px;
}

.tree summary {
	display: block;
	cursor: pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker {
	display: none;
}

.tree summary:focus {
	outline: none;
}

.tree summary:focus-visible {
	outline: 1px dotted #000;
}

.tree li::after,
.tree summary::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(var(--spacing) / 2 - var(--radius));
	left: calc(var(--spacing) - var(--radius) - 1px);
	width: calc(2 * var(--radius));
	height: calc(2 * var(--radius));
	border-radius: 50%;
	background: #ddd;
}

.tree summary::before {
	z-index: 1;
	background: #999 url("expand-collapse.svg") 0 0;
}

.tree details[open] > summary::before {
	background-position: calc(-2 * var(--radius)) 0;
}

.vec-header {
	color: #999;
	margin-right: 4px;
}

.vec-data {
	color: #696;
}