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

.cells {
	margin: @margin-medium 0px;

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

	&:last-child {
		margin-bottom: 0;
	}
}

.cells-inline {
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	margin-left: -@margin-small;

	.cell {
		margin-left: @margin-xsmall;
		margin-bottom: @margin-xsmall;

		&:last-child {
			margin-bottom: @margin-xsmall;
		}

		@media @xsmall {
			width: 100%;
		}
	}
}

.cell {
	display: flex;
	align-items: center;
	margin: @margin-xsmall 0;
	.medium-font();
	.font-size(@font-size-small);
	color: @grey;
	background: @grey-000;
	border: 1px solid @light-grey;
	border-radius: @border-radius;

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

	&:last-child {
		margin-bottom: 0;
	}

	&.disabled {
		background: lighten(@grey-200, 5%);
		border: 1px solid @grey-200;

		.cell-image {
			filter: grayscale(100%) opacity(50%);
		}

		.cell-label {
			color: @mid-grey;
		}
	}

	&.error {
		background: mix(@error, @grey-000, 20%);
		border: 1px solid @error;

		.cell-label {
			color: @error;
		}
	}

	&.dragging {
		background-color: transparent;
		border: 1px dashed @light-grey;
		&>* {
			opacity: 0;
		}
	}

	&.reorderable {
		cursor: grab;
	}
}

.reorderable-asset-cell {
	display: inline-block;
	margin: 0 @margin-xsmall @margin-xsmall 0;
}

.cell-image {
	width: 80px;
}

.cell-hint {
	margin-bottom: 0;
	color: @dark;
	background-color: @light;
	border-radius: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

.cell-icon {
	margin: @margin-xsmall;
	color: @grey-400;

	+ .cell-content {
		margin-left: 0;
	}
}

.cell-content {
	flex: 1;
	margin: 0 @margin-xsmall;
	font-size: inherit;

	input {
		margin: 0;
	}
}

.cell-control {
	
}