@use "sass:color";
@use "../variables" as *;
@use "../button" 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--header {
	margin-top: 1%;
	display: flex;
	align-items: center;
}

div.tree--header button {
	@include standard_button;

	&::before {
		content: "Add";
	}
}