@import (reference) "global";
@import (reference) "items-view";

@TreeNodePadding: 0.25em;
@TreeNodeImpactMinHeight: 1.5em;
@TreeNodeImpactIndent: 1.5em;

@TreeNodeMinHeight: 2.2em;
@TreeNodeIndent: 2.25em;

.ui.tree {
	.tree.item {
		padding: 0;
	}

	.child-nodes {
		display: none;
		overflow: visible;
		margin-left: @TreeNodeIndent !important;
	}

	.tree.node {
		min-height: @TreeNodeMinHeight;
		padding: @TreeNodePadding;
		line-height: @TreeNodeMinHeight;
		white-space: nowrap;
		> .expand-button {
			float: left;
			width: @TreeNodeMinHeight;
			height: @TreeNodeMinHeight;
			line-height: @TreeNodeMinHeight;
			margin-right: @TreeNodePadding;
			text-align: center;
			.transition-duration(0.3s);
			.transition-property(transform);
			&:before {
				font-family: Icons;
				content: "\f105"; // Arrow Right
			}
		}

		&.expanded > .expand-button {
			.rotate(90deg);
		}
		&.leaf > .expand-button {
			visibility: hidden;
		}
		.ui.checkbox {
			top: 0.35em;
		}

		.node-content {
			overflow: hidden;
		}
	}
}

.ui.tree.impact {
	.child-nodes {
		margin-left: @TreeNodeImpactIndent !important;
	}
	.tree.node {
		min-height: @TreeNodeImpactMinHeight + @TreeNodePadding * 2;
		line-height: @TreeNodeImpactMinHeight;
		> .expand-button {
			width: @TreeNodeImpactMinHeight;
			height: @TreeNodeImpactMinHeight;
			&:before {
				line-height: @TreeNodeImpactMinHeight;
			}
		}
		.ui.checkbox {
			top: 0.25em;
		}
	}
}

@nodeHeight: @TreeNodePadding * 2 + @TreeNodeMinHeight;

.ui.tree.navigator {
	.tree.node {
		position: relative;
		overflow: hidden;
		padding-left: 1em;
		> .expand-button {
			float: none;
			position: absolute;
			right: 0;
			top: 0;
			width: @nodeHeight;
			height: @nodeHeight;
			line-height: @nodeHeight;
			margin-right: 0;

			&:before {
				float: right;
				margin-right: 1em;
			}
		}
	}
}

.ui.tree {
	.tree.item:not(.current) {
		> .tree.node:hover {
			background: @itemsViewHoverBackground;
		}
	}
	.tree.item.current {
		> .tree.node {
			background: @itemsViewCurrentBackground;
			color: @itemsViewCurrentColor;
		}
	}
}

.ui.tree.inverted {
	background: @itemsViewInvertedBackground;
	.tree.item {
		color: @itemsViewInvertedTextColor;
		background: @itemsViewInvertedBackground;
		&:not(.current) {
			> .tree.node:hover {
				background: @itemsViewInvertedHoverBackground
			}
		}
		&.current {
			> .tree.node {
				background: @itemsViewInvertedCurrentBackground;
			}
		}
	}
}

.ui.tree.basic {
	background: none;
	.tree.item:not(.current) {
		color: inherit;
		background: none;
		> .tree.node, > .tree.node:hover {
			color: inherit;
			background: none;
		}
	}
	.tree.item.current {
		> .tree.node {
			color: inherit;
			background: none;
		}
	}
}

.tree-light-color(@color) {
	.ui.tree.light-@{color} {
		.tree.item:not(.current) {
			> .tree.node:hover {
				background: fade(@@color, 10%);
			}
		}
		.tree.item.current {
			> .tree.node {
				background: fade(@@color, 20%);
			}
		}
	}
}

//.tree-light-color(red);
//.tree-light-color(orange);
//.tree-light-color(yellow);
//.tree-light-color(olive);
//.tree-light-color(green);
//.tree-light-color(teal);
//.tree-light-color(blue);
//.tree-light-color(violet);
//.tree-light-color(purple);
//.tree-light-color(pink);
//.tree-light-color(brown);
//.tree-light-color(grey);
//.tree-light-color(black);

.tree-color(@color) {
	.ui.tree.@{color} {
		.tree.item:not(.current) {
			> .tree.node:hover {
				background: fade(@@color, 12%);
			}
		}
		.tree.item.current {
			> .tree.node {
				background: @@color;
				color: @invertedSelectedTextColor;
			}
		}
	}
}

//.tree-color(red);
//.tree-color(orange);
//.tree-color(yellow);
//.tree-color(olive);
//.tree-color(green);
//.tree-color(teal);
//.tree-color(blue);
//.tree-color(violet);
//.tree-color(purple);
//.tree-color(pink);
//.tree-color(brown);
//.tree-color(grey);
//.tree-color(black);