@import  "../coco-variables.scss";

$--tree-pic: './imgs/tree/tree_icons_line.svg';
$--tree-node-height:32px;
$--tree-icon-width:18px;


.tree {
  margin: 0; padding: 0;
  li ul{ margin: 0; padding: 0; }
}
	
.tree-node {
	height: $--tree-node-height; /*update*/
	padding-left: 4px; /*update*/
}
.tree-expanded,
.tree-collapsed,
.tree-folder,
.tree-file,
.tree-checkbox,
.tree-indent {
  width: $--tree-icon-width - 2; /*update*/
  height: 100%; /*update*/
  margin: 0; /*update*/
  background-size: $--tree-icon-width; /*update*/
  /*opacity: 0.6; /*update*/
  background-position: 0 center; /*update*/
  margin-left: 2px; /*update*/
}


.tree-lines{
	.tree-expanded,.tree-root-first .tree-expanded {
		background: url($--tree-pic) no-repeat -150px center; /*update*/
		background-size: 330px auto;
	}
	.tree-root-first .tree-expanded{ background-position: -270px center;}
	
	.tree-collapsed,.tree-root-first .tree-collapsed {
		background: url($--tree-pic) no-repeat -120px center; /*update*/
		background-size: 330px auto;
	}
	.tree-root-first .tree-collapsed{ background-position: -300px center;}
	
	.tree-node-last .tree-expanded,.tree-root-one .tree-expanded {
		background: url($--tree-pic) no-repeat -30px center; /*update*/
		background-size: 330px auto;
	}
	.tree-node-last .tree-collapsed,.tree-root-one .tree-collapsed {
		background: url($--tree-pic) no-repeat 0 center; /*update*/
		background-size: 330px auto;
	}
	.tree-folder-open {
		background-image: url('./imgs/tree/tree-folder-open-line.svg'); /*update*/
	}
	
}



.tree-line {
	background: url($--tree-pic) no-repeat -210px center; /*update*/
	background-size: 330px auto;
}
.tree-join {
	background: url($--tree-pic) no-repeat -240px center; /*update*/
	background-size: 330px auto;
}
.tree-joinbottom {
	background: url($--tree-pic) no-repeat -180px center; /*update*/
	background-size: 330px auto;
}

.tree-expanded {
	background-image: url('./imgs/tree/tree-expanded.svg');
}
.tree-expanded-hover {
	background-image: url('./imgs/tree/tree-expanded-hover.svg');
}
.tree-collapsed {
	background-image: url('./imgs/tree/tree-collapsed.svg');
}
.tree-collapsed-hover {
	background-image: url('./imgs/tree/tree-collapsed-hover.svg');
}
.tree-folder {
	background-image: url('./imgs/tree/tree-folder.svg'); /*update*/
}
.tree-folder-open {
	background-image: url('./imgs/tree/tree-folder-open.svg'); /*update*/
}
.tree-file {
	background-image: url('./imgs/tree/tree-file.svg'); /*update*/
}
.tree-checkbox0 {
	background-image: url('./imgs/tree/tree-checkbox0.svg'); /*update*/
}
.tree-checkbox1 {
	background-image: url('./imgs/tree/tree-checkbox1.svg'); /*update*/
}
.tree-checkbox2 {
	background-image: url('./imgs/tree/tree-checkbox2.svg'); /*update*/
}
.tree-title {
  font-size: 14px;
  padding: 0 2px;
  margin: 4px 0;
  height: 18px;
  line-height: 18px;
}
.tree-node-proxy {
  font-size: 14px;
  line-height: 20px;
  padding: 0 2px 0 20px;
  border-width: 1px;
  border-style: solid;
  z-index: 9900000;
}
.tree-dnd-icon {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 18px;
  left: 2px;
  top: 50%;
  margin-top: -9px;
}
// .tree-dnd-yes {
//   background: url('images/tree_icons.png') no-repeat -256px 0;
// }
// .tree-dnd-no {
//   background: url('images/tree_icons.png') no-repeat -256px -18px;
// }
.tree-node-top {
  border-top: 1px dotted red;
}
.tree-node-bottom {
  border-bottom: 1px dotted red;
}
.tree-node-append .tree-title {
  border: 1px dotted red;
}
.tree-editor {
  border: 1px solid #95B8E7;
}
.tree-node-proxy {
  background-color: #ffffff;
  color: #000000;
  border-color: #95B8E7;
}
.tree-node-hover {
  background: #eaf2ff;
  color: #000000;
}
.tree-node-selected {
  background: #ffe48d;
  color: #000000;
}
	
	
	
	
	
	
	
.tree-icon{ margin-left: 2px;  margin-right: 2px; opacity: 0.6;}
.tree-node-hover,.tree-node-selected{ border-radius: 4px;}