//
// ATUM Tree
//-----------

.atum-tree {
	position: relative;
	min-height: 100px;
	
	.alert {
		margin-top: $grid-gutter-width/2;
		font-size: 12px;
		text-align: left;
		i {
			font-size: 17px;
		}
	}
	
	.no-locations-set {
		justify-content: center;
	}
}

.ui-helper-hidden {
	display: none;
}

ul.easytree-container {
	font-size: 15px;
	font-weight: normal;
	line-height: 1.3;
	white-space: nowrap;
	padding: 15px 10px !important;
	margin: 0;
	border: 1px solid $info;
	border-radius: 6px;
	overflow: auto;
	height: 100%;
	text-align: left;
	padding: 10px 5px;
	
	> li {
		
		&:first-child {
			padding-top: 3px;
		}
		
		&:not(:first-child) {
			padding: $grid-gutter-width/2 0;
			border-top: 1px solid $gray-200;
		}
		
		&:nth-child(2) {
			margin-top: 20px;
		}
		
		&:last-child {
			padding-bottom: 0;
		}
	}
	
	&:focus {
		outline: none;
	}
	
	ul {
		padding: 0 0 0 16px;
		margin: 0;
		
		&:focus {
			outline: none;
		}
		
		li {
			list-style: none;
			margin: 0;
			padding: 2px 0;
			
			&, a {
				color: $dark;
			}
			
			&.easytree-lastsib {
				background-image: none;
			}
			
			.selected-node {
				.easytree-title a, .atum-icon {
					color: $success !important;
				}
			}
		}
	}
	
	// Style, when control is disabled
	.ui-easytree-disabled & {
		opacity: 0.5;
		background-color: $secondary;
	}
	
	// Custom icons
	img {
		width: 16px;
		height: 16px;
		margin-left: 3px;
		vertical-align: top;
		border-style: none;
	}
	
}

// Suppress lines if level is fixed expanded (option minExpandLevel)
ul.easytree-no-connector {
	
	> li {
		background-image: none;
	}
	
}

//
// Common icon definitions
//-------------------------

span {
	
	&.easytree-empty, &.easytree-vline, &.easytree-expander, &.easytree-icon {
		width: 16px;
		height: 16px;
		font-size: 17px;
		display: inline-block;
		vertical-align: top;
		font-family: $atum-icon-font;
		cursor: pointer;
		color: $dark;
	}
	
	&.easytree-custom-icon {
		display: inline-block !important;
		vertical-align: -1px;
		color: $dark;
		margin-left: 3px;
		text-indent: 0 !important; // In case jQuery UI CSS is loaded
	}
	
}

//
// Expander icon
//
// Prefix: easytree-exp-
// 1st character: 'e': expanded, 'c': collapsed, 'n': no children
// 2nd character (optional): 'd': lazy (Delayed)
// 3rd character (optional): 'l': Last sibling
//-----------------------------------------------------------------

span.easytree-expander {
	transition: all .2s ease-in-out;
	margin-right: 3px;
	
	&:before {
		font-family: atum-icon-font;
		content: $atmi-plus-circle;
	}
	
	&:hover {
		color: $primary !important;
	}
}

.easytree-exp-e, .easytree-exp-ed, .easytree-exp-el, .easytree-exp-edl {
	span.easytree-expander {
		&:before {
			font-family: atum-icon-font;
			content: $atmi-circle-minus;
		}
	}
}

// Connector instead of expander, if node has no children
.easytree-exp-n, .easytree-exp-nl {
	span.easytree-expander {
		cursor: default;
		
		&:before {
			content: '';
			cursor: default;
		}
	}
}

//
// Node type icon
// Note: IE6 doesn't correctly evaluate multiples class names,
//		 so we create combined class names that can be used in the CSS.
//
// Prefix: easytree-ico-
// 1st character: 'e': expanded, 'c': collapsed
// 2nd character (optional): 'f': folder
//----------------------------------------------------------------------

// Default icon
.easytree-ico-c {
	span.easytree-icon {
		margin-left: 3px;
		
		&:before {
			font-family: atum-icon-font;
			content: $atmi-map-marker;
		}
	}
}

// Collapsed Folder
.easytree-ico-ef {
	span.easytree-icon {
		&:before {
			font-family: atum-icon-font;
			content: $atmi-map-marker;
		}
	}
}

// check and uncheck icons for the 1.4.11 update : editable locations on SC
.checked{
	span.easytree-icon {
		&:before {
			color: $blue;
		}
	}
}

//
// Node titles
//-------------

.easytree-title {
	display: inline-block;
	padding-left: 3px;
	padding-right: 3px;
	vertical-align: top;
	margin-left: 3px;
	border-radius: 0;
	text-decoration: none;
	cursor: pointer;
	
	a {
		color: $dark !important;
		
		&:hover {
			color: $primary !important;
		}
	}
}

ul.easytree-container.easytree-focused {
	
	span {
		&.easytree-selected, &.easytree-active {
			.easytree-title {
				background-color: $primary;
				
				&, a {
					color: $white !important;
				}
				
			}
		}
	}
	
}

// Tree controls
.tree-controls {
	text-align: right;
	margin-bottom: 5px;
	padding-right: 5px;
	
	a {
		font-size: 11px;
		font-weight: 400;
		
		&:not(:first-child) {
			border-left: 1px solid $gray-500;
			padding-left: 5px;
		}
	}
}