.zeero-tree {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	border: 1px solid var(--border-seam);
	border-radius: 0.3em;
	overflow: hidden;
	font-size: 0.9em;
}

.zeero-tree-head {
	display: grid;
	font-weight: bold;
	background-color: var(--bg-base);
	border-bottom: 1px solid var(--border-seam);
	flex: none;
}

.zeero-tree-body {
	flex: 1;
	min-height: 0;
	overflow: auto;
}

.zeero-tree-row {
	display: grid;
	border-bottom: 1px solid var(--border-seam);
	border-left: 2px solid transparent;
}

.zeero-tree-row:hover {
	background-color: var(--bg-base);
}

.zeero-tree-row.expandable {
	cursor: pointer;
}

.zeero-tree-row.match {
	border-left-color: var(--border-accent);
}

.zeero-tree-row.active {
	background-color: var(--bg-accent);
	color: var(--text-on-fill);
}

.zeero-tree-cell {
	padding: 0.25em 0.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zeero-tree-indent {
	display: flex;
	align-items: center;
	gap: 0.35em;
	min-width: 0;
}

.zeero-tree-indent > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zeero-tree-chevron {
	cursor: pointer;
	width: 0.9em;
	flex: none;
	color: var(--text-muted);
}

.zeero-tree-row.active .zeero-tree-chevron {
	color: var(--text-on-fill);
}

.zeero-tree-chevron-placeholder {
	width: 0.9em;
	flex: none;
}

.zeero-tree-empty {
	padding: 1em;
	color: var(--text-muted);
	text-align: center;
}