@import "theme.less";

#tree {
	grid-area: tree;
	padding: 16px;
	background-color: #333;
	color: #ddd;
	z-index: 100; // Over crumbs shadow

	.node {
		display: grid;
		grid-template-columns: 24px min-content;
		grid-template-rows:
			min-content
			1fr;
		margin-top: 12px;


		.expand-toggle {
			img {
				width: 16px;
				height: 16px;
			}
		}

		.name {
			white-space: nowrap;
			cursor: pointer;
			user-select: none;

			&:hover {
				color: @color1;
			}
			&.selected {
				color: @color1;
				font-weight: bold;
			}

		}

		.children {
			padding-left: 24px;
			margin-left: 8px;
			border-left: 1px solid #555;
			grid-column: 1 / -1;

			&.collapsed {
				display: none;
			}
		}
	}
}