tree-node {
	display: block;
}
tree-node > div {
	display: inline-block;
	background: lavender;
	border: 2px solid purple;
	border-radius: 10px 10px 0 0;
	padding: 1px 5px;
	vertical-align: top;
	border-collapse: collapse;
	border-left-color: black;
}
tree-node.one > div {
	border-radius: 10px 0 0 10px;
}
tree-node.leaf > div {
	border-radius: 10px 10px 10px 10px;
}
tree-node > div > .type {
	font-weight: bold;
	white-space: pre;
}
tree-node > div > .args {
	font-family: monospace;
}
tree-node > node-content {
	border-collapse: collapse;
	padding: 4px;
	border: 2px solid purple;
	background: #6083;
}
node-content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 3px;
}
node-content > tree-node {
	flex-grow: 1;
	width: 100%;
}
node-content > tree-node.text,
node-content > tree-node.leaf {
	flex-grow: 0;
	width: auto;
}


tree-node.one > node-content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2px;
	padding: 2px;
	border-collapse: collapse;
}
tree-node.simple > node-content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
tree-node.simple > node-content > * {
	flex-grow: 0;
}

tree-node.one > div {
	align-self: start;
}
tree-node.branch:not(.one) > div {
	border-bottom: none;
}
tree-node.one > div {
	border-right: none;
}

tree-node.one {
	display: flex;
}

tree-node.text {
	display: inline-block;
	background: beige;
	border: 2px solid purple;
	border-radius: 10px;
	padding: 1px 3px;
	font-family: serif;
}

/*tree-node:not(tree-node *) > node-content {
	background: none;
}*/