@import "variables.less";

.tree {
	padding: 15px;
}

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

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

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

.tree-link .node-parent {
	color: @text-muted;
	font-size: 14px;
	width: 10px;
	text-align: center;
}

.tree-link .node-leaf {
	color: @text-extra-muted;
}

.tree-link .node-parent, .tree-link .node-leaf {
	margin-right: 5px;
}

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

	a {
		color: @text-muted;
	}
}

.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) {
	.tree-children {
		padding-left: 10px;
	}
}

// decoration
// .tree, .tree-node {
.tree.with-skeleton, .tree.with-skeleton .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;
	}

	&:last-child::after {
		top: 11px;
		left: -13px;
		height: ~"calc(100% - 15px)";
		width: 3px;
		background: #fff;
	}
}

.tree.with-skeleton .tree-children > .tree-node > .tree-link::before {
	content: '';
	position: absolute;
	width: 12px;
	height: 1px;
	top: 10px;
	left: -11px;
	background: @border-color;
}

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

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