@bigfishtv/cockpit/styles/components/list.less

.list {
	margin: @margin-medium 0;

	ul {
		margin: 0 @margin-medium;
		list-style: none;

		li {
			margin: @margin-xsmall 0;

			&:first-child {
				margin-top: 0;
			}

			&:last-of-type {
				margin-bottom: 0;
			}

			ul {
				margin: 0;
				padding-left: @padding-large;

				li {
					
				}
			}
		}

		.list-cell {
			display: flex;
			align-items: center;
			flex: 0 0 auto;
			margin: @margin-xsmall 0;
			padding: 10px @padding-xsmall;
			background: @white;
			border: 1px solid @light-grey;
			box-shadow: 0px 1px 5px fade(@black, 3.5%);
		}
	}

	table {
		width: 100%;

		tr {

			table {
				padding-left: @padding-large;
			}
		}
	}
}

.list-cell {

	cursor: pointer;
	border-bottom: 1px solid @light-grey;
	background-color: white;

	.status {
		margin: 0 20px; 
		display: inline-block;
	}

	.list-cell-spacer {
		display: inline-block;
		margin: -25px 0;
		height: 50px;
		.translate(0, -5px);

		&.indicator {
			&:after {
				content: '▼';
				position: absolute;
				right: 0;
				top: 50%;
				.translate(0, -50%);
			}
			&.collapsed:after {
				content: '►';
			}
		}
	}

	>td {
		position: relative;
		height: 50px;
	}

	&:first-child {
		border-top: 1px solid @light-grey;
	}

	&:hover {
		background-color: lighten(@light-grey, 5%);
	}

	&.dragging {
		border: 1px dotted #ccc;
		* {
			opacity: 0.5;
		}
	}

	&.selected {

		background-color: @primary !important;
		&:hover {
			background-color: darken(@primary, 5%);
		}
		&>td {
			color: @white !important;
		}
	}
}

.list-cell-children {

	> td {
		padding: 0;
		padding-left: 50px;

		.list-cell {
			border-left: 1px solid @light-grey;
		}
	}

	+ .list-cell {
		border-top: 1px solid @light-grey;
	}
}


.list-cell-draggable {
	width: 20px;
	cursor: ns-resize;
}

.list-cell-title {
	margin: 0;
}