// -------------------------------------------------------------------
// :: TREEVIEW
// -------------------------------------------------------------------


@mixin _treeview_list-group() {
	list-style: none;
	padding: 0;
	//border-bottom: 1px solid darken($light, 10%);
}

@mixin _treeview_list-group-item() {
	background: $light;
	border-top: 1px solid darken($light, 10%);
	line-height: rem(42px);
	padding: 0 rem(10px);

	&.indent-level-0 {
		font-weight: bold;
	}

	&.indent-level-1 {
		background: $white;
	}

	&.indent-level-3 {
		background: $white;
	}

	&:hover {
		background-color: $white;
	}
}

.treeview .list-group-item {
	cursor: pointer;
}

.treeview span.indent {
	margin-left: 10px;
	margin-right: 10px;
}

.treeview span.icon {
	width: 12px;
	margin-right: 5px;
}

.treeview .node-disabled {
	color: $medium;
	cursor: not-allowed;
}

.o-treeview {

	.badge {
		margin-left: 10px;
		border-radius: rem(5px);
		background-color: $secondary-color;
		color: $white;
		font-weight: bold;
		font-size: $font-size-small;
		line-height: 16px;
		padding: rem(2px) rem(10px);
		vertical-align: middle;

		&:hover {
			background-color: darken($secondary-color, 5%);
		}
	}

	ul.list-group {
		@include _treeview_list-group();
	}

	li.list-group-item {
		@include _treeview_list-group-item();
	}

	.o-treeview__btn {
		background: $white !important;
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}
}

.o-treeview__add_form {

	padding: 1rem;
	vertical-align: top;

	.a-input,
	.o-multiselect,
	.a-toggle {
		margin: 0.5rem 0;
		display: block;
	}

	.o-treeview_add_form_bottom {
		clear: both;

		a:not([class='a-button']) {
			color: $aqua;
			display: inline-block;
			margin-left: 1rem;
		}
	}

	@include FLOW-at($desktop-xl) {
		padding-top: 0.5em;

		.a-input,
		.o-multiselect,
		.a-toggle,
		.o-treeview_add_form_bottom {
			display: inline-block;
			margin: 0.5em 0 0;
			padding: 0;
			vertical-align: top;
		}

		.a-toggle {
			vertical-align: bottom;
			position: relative;
			top: rem(-5px);
		}

		.a-input {
			width: 20%;
		}

		.o-multiselect {
			width: 30%;
		}

		.o-multiselect .o-multiselect__field-holder {
			max-height: 1rem;
			vertical-align: bottom;
		}
	}
}