@use "sass:color";
@use "../variables" as *;

$selection-border-width: 2px;

div.tree {
	position: relative;

	grid-column: left / left;
	grid-row: upper / upper;
	width: 100%;
	height: 100%;
	border: 2px solid $color-dark;

	h3 {
		margin-left: 0.5rem;
	}

	div#controls {
		position: absolute;
		bottom: 2%;
		right: 2%;
	}
}

div.tree ul {
	width: 80%;
	margin-left: 10%;
	padding: 0;

	display: flex;
	flex-direction: column;
	align-items: stretch;

	overflow: scroll;
}

div.tree li {
	display: inline;
	margin-left: 0;
	margin-bottom: 0.4rem;
	border: 2px solid transparent;

	user-select: none;
	list-style: none;
	line-height: 1em;

	&:hover {
		background: color.change($color-light, $alpha: 0.08);
		border: $selection-border-width solid color.change($color-light, $alpha:0.3);
	}
	&.selected {
		background: color.change($color-light, $alpha: 0.2);
	}
}

div.tree button {
	position: relative;
	top: -0.15em;

	display: inline;
	margin-left: 0;
	margin-bottom: 0.4rem;
	border: 2px solid transparent;
	background: transparent;

	user-select: none;
	list-style: none;
	line-height: 1em;

	aspect-ratio: 1;

	&::before {
		text-align: center;
		vertical-align: middle;
		content: "+"; // Nicer X
	}
	&:hover {
		background: rgba(1,1,1,0.1);
		transition: background 0.1s;
	}
}