@import "variables.less";

.tree {
	padding: 15px;
}

.tree li {
	list-style: none;
	margin: 2px 0px;
}

ul.tree-children {
	padding-left: 20px;
}

.tree-link {
	cursor: pointer;
	display: inline-block;
	padding: 1px;
}

.tree-link.active i {
	color: @indicator-blue !important;
}

.tree-hover {
	background-color: @panel-bg;
	min-height: 20px;
	border: 1px solid @border-color;
}

.tree-node-toolbar {
	display: inline-block;
	padding: 0px 5px;
	margin-left: 15px;
	margin-bottom: -4px;
	margin-top: -8px;
}

@media (max-width: @screen-xs) {
	ul.tree-children {
		padding-left: 10px;
	}
}

// decoration

.tree, .tree-node {
	position: relative;
	
	&.opened::before, &:last-child::after {
		content: '';
		position: absolute;
		top: 16px;
		left: 8px;
		height: ~"calc(100% - 26px)";
		width: 1px;
		background: @border-color;
		z-index: -1;
	}

	&:last-child::after {
		top: 11px;
		left: -13px;
		height: ~"calc(100% - 15px)";
		width: 3px;
		background: #fff;
	}
	
	&.opened > .tree-children > .tree-node > .tree-link::before {
		content: '';
		position: absolute;
		width: 15px;
		height: 1px;
		top: 10px;
		left: -11px;
		z-index: -1;
		background: @border-color;
	}
}

.tree.opened::before {
	left: 23px;
	top: 33px;
	height: ~"calc(100% - 67px)";
}

.tree-link.active ~ .balance-area {
	color: @text-color !important;
}