@bigfishtv/cockpit/styles/template/panel.less

.panel {
	margin-bottom: (@gutter * 2);
	background: @white;
	border: 1px solid @light-grey;
	box-shadow: 0px 1px 5px fade(@black, 3.5%);

	&.droptarget {
		background: @light-grey;
		border: 1px solid @light-grey;
		
		> * {
			opacity: 0;
		}
	}
}

.panel-columns {
	margin-left: -(@gutter * 2);
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;

	.panel {
		margin-left: (@gutter * 2);
		flex: 1;
		min-width: 240px;
		max-width: 400px;
	}

	input + .select {
		margin-left: 0;
	}
}

.panel-header {
	display: flex;
	align-items: center;
	padding: @padding-small;
	.font-size(1.5);
	line-height: @button-height;

	input,
	.input-group {
		margin-top: 0;
		margin-bottom: 0;
	}

	> .icon {
		margin-right: @margin-xsmall;

		 * {
			fill: @dark-grey !important;
		}
	}

	> div {
		display: inline-flex;
	}
}

.panel-title {
	flex: 1 1 auto;
	margin: 0;
	line-height: @height-medium;
}

.panel-content {
	flex: 1 0 auto;
	padding: @padding-small;

	.panel {
		margin: @margin-small 0;

		&:first-of-type {
			margin-top: 0;
		}

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

	p,
	ul,
	ol {

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

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

		&:only-child {
			margin: @margin-small 0;
		}
	}

	.card {
		max-width: 250px;
	}
}

.panel-table {
	width: 100%;

	tbody {

		tr {

			&:nth-child(even) {
				background: @light;
			}
		}
	}
}

.panel-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: @padding-small;
}

.panel-drawer {
	padding: @padding-medium @padding-small;
	background: @grey-000;
	border-top: 1px solid @light-grey;
}