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.7rem;
				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: 1.3rem;
		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;

		&:before {
			font-weight: 300;
		}
	}
	a {
		color: $color--mint;
		margin: 0.2rem 1rem -0.2rem 1rem;
		font-weight: 600;
		font-size: 1.6rem;
		transition: all 0.1s linear;
		text-decoration: none;
		&:hover {
			color: darken($color--mint, 10%);
		}
	}

	.drag-drop__item__add {
		& > svg {
			margin-right: 1rem;
			margin-left: -0.5rem;
		}
	}
}
.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;
}