ul.tree {
	list-style: none;
	padding: 0;
	max-width: 50rem;
	@extend .checkboxes--small;

	&.full-width {
		max-width: 100%;
	}

	li { 
		padding: 0;
		display: block;
		font-size: 1.6rem;
	}
	
	.tree__close,
	.close {
		.tree__leave {
			&:before {
				display: inline-block;
				width: 1rem;
				height: 1.8rem;
				content: '';
				margin-top: 0;
				margin-bottom: -0.2rem;
				margin-left: -2rem;
				margin-right: 0;
				border-left: 1rem solid $color--mint;
				border-top: 0.9rem solid transparent;
				border-bottom: 0.9rem solid transparent;
			}
		}
		.tree {
			display: none;
		}
	} 
	.final {
		.tree__leave {
			&:before {
				border: none;
			}
		}
	} 

	.tree {
		margin: 0 0 0 2rem;
		padding: 0;
		list-style: none;
		margin-bottom: 0.5rem;

		.tree__leave {
			font-weight: 400;
			width: 100%;
			font-size: 1.4rem;
			a {
				font-weight: 400;
			}
		}
	}
}
.tree__leave {
	display: table;
	line-height: 1.8rem;
	margin: 0.2rem;
	padding: 0.5rem 0 0.5rem 3.5rem;
	font-weight: 600;
	width: 100%;
	text-align: left;
	background-color: rgba($color--seashell,0.2);
	cursor: pointer;

	&:before {
		display: inline-block;
		float: left;
		width: 1.8rem;
		height: 1rem;
		content: '';
		margin-top: 0.5rem;
		margin-bottom: 0rem;
		margin-left: -2.5rem;
		margin-right: 0;
		border-left: 0.9rem solid transparent;
		border-right: 0.9rem solid transparent;
		border-top: 1rem solid $color--mint;
	}
	&:hover {
		background-color: rgba($color--seashell, 0.35);
	}

	li.final & {
		cursor: auto;
	}

	a {
		display: inline-block;
		float: left;
		font-weight: 600;
		color: $color--mint;
		margin: 0rem 1rem 0rem 1rem;
		font-weight: 600;
		font-size: 1.6rem;
		transition: all 0.1s linear;
		text-decoration: none;

		&:before {
			font-weight: 300;
		}
		&:hover {
			color: darken($color--mint, 10%);
		}
	}

	&.drag-drop__item {
		span > svg {
			margin-right: 1rem;
			margin-left: -0.5rem;
			margin-top: -0.2rem;
		}


	}
}
.tree__leave__functions {
	display: block;
	float: right;

	a {
		cursor: pointer;
	}
} 
.tree__leave--add {
	@extend .tree__leave;
	color: $color--mint;  
	svg {
		color: $color--mint; 
		font-size: 1rem;
	}
} 

.tree__leave__caption {
	margin: -0.2rem 1rem 1rem 3rem;
	font-weight: 200;
	font-size: 1.3rem;
	line-height: 1.4rem;
}

.tree__hypo-elem {
	background: transparent;
	height: 2rem;
	margin: -1rem 0.2rem;
	transition: all 0.2s linear;
	width: 100%;
	cursor: pointer;
	display: none !important;

	.tree-ready-to-insert-cont & {
		display: block !important;
	}

	&.visible {
		border: 1px dashed rgba($color--seashell, 0.4);
		margin: 0 0.2rem;
	}


	&.inserted,
	&:hover {
		margin: 0.5rem 0.2rem;
		height: 2.8rem;
		background-color: rgba($color--mint,0.2);
	}

	&.inserted:hover {
		background-color: rgba($color--red, 0.2);
	}
}

.tree__hypo-elem__inserting {
	width: auto;
	padding-right: 3rem;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s linear;
	background: rgba(lighten($color--seashell, 20%), 0.9);
	box-shadow: 0 0 10px -2px rgba($color--black, 0.2);
	transform: translateY(-50%);

	&.visible {
		opacity: 1;
	}
}

.tree-ready-to-insert-cont {
	position: relative;
	padding: 1rem 0;
}