@import 'utilities';

.qs-meta-box{
	.inputlist{
		margin-bottom: 0;
		overflow: auto;
		max-width: 300px;
		
		li{
			margin: 0;
			padding: 5px 0;
		}
	}
}

.qs-field,
.qs-fieldset{
	margin-top: 10px;
}

.qs-field{
	@extend %clearfix;
	line-height: 1.5;

	.qs-fieldset &{
		padding-top: 0;
	}

	&.generic,
	&.select{
		.qs-label{
			float: left;
			padding: 5px 0;
			margin: 0 10px 0 0;
		}
	}
}
	.qs-label{
		margin: 0;
	}
	.qs-legend{
		padding: 0 0 2px;
		margin: 0 0 5px;
		border-bottom: 1px solid #eee;
	}

.qs-fieldset{
	.inputlist{
		@extend %clearfix;
		margin: 5px 0 0;
	}

	// Fields AND Legend Horizontal
	&.horizontal{
		.qs-legend,
		.qs-field,
		.inputlist{
			float: left;
		}

		.qs-legend{
			margin: 0;
			padding: 0;
			border: none;
		}

		.qs-field,
		.inputlist{
			margin: 0 5px;
		}
	}

	// Fields-only Horizontal
	.horizontal{
		.qs-field{
			float: left;
			margin: 0 10px 0 0;
		}
	}
}

.qs-container{
	margin: 10px 0 0;
	border-top: 1px solid #eee;
}
.qs-sortable{
	padding: 10px;
	background: #fff;
	margin: 10px 0;
}
	.qs-item{
		@extend %clearfix;
		display: block;
		background: rgba(#fff, .7);
		position: relative;
		border-bottom: 1px solid #eee;
		cursor: move;
		padding: 5px 0;

		.qs-delete{
			float: right;
		}
	}

.qs-template{
	display: none;
}

.qs-repeater{
	.qs-field{
		float: left;
		margin: 4px 10px 4px 0;
	}
		label{
			display: block;
		}
		.qs-delete{
			margin-top: 5px;
		}
}

.qs-sort{
	label{
		float: left;
		line-height: 28px;
		padding-right: 10px;
	}
	
	.qs-field &{
		margin-bottom: 10px;
	}
}