@import 'utilities';

.qs-meta-box {
	@extend %clearfix;

	.inputlist {
		margin-bottom: 0;
		overflow: auto;
		max-width: 300px;

		li {
			margin: 0;
			padding: 5px 0;
		}
	}
}

.qs-field,
.qs-fieldset {
	.qs-meta-box & {
		margin-top: 10px;
	}
	.qs-form-field-row & {
		margin-bottom: 10px;
	}
}

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

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

	&.generic,
	&.textarea,
	&.select,
	&.editor {
		.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 {
	@extend %clearfix;
	margin: 10px 0 0;
	border-top: 1px solid #eee;
}
	.qs-preview {
		@extend %clearfix;
		position: relative;
	}

.qs-sortable {
	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 48px 5px 0;

		&:before {
			content: '\f156';
			font-family: dashicons;
			position: absolute;
			top: 0;
			right: 0;
			width: 48px;
			height: 40px;
			text-align: center;
			line-height: 40px;
		}

		.qs-delete {
			float: right;
		}
	}

.qs-template {
	display: none;
}

.qs-repeater {
	.qs-sortable {
		padding: 0;
		margin: 10px 0 0;
	}

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

		&.single-field {
			margin-right: 70px;

			.qs-input {
				display: block;
				width: 100%;
			}

			~ .qs-delete {
				position: absolute;
				top: 0;
				right: 48px;
			}
		}
	}

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

.qs-map {
	@extend %clearfix;

	.qs-clear {
		float: right;
	}
}
	.qs-map-canvas {
		width: 100%;
		height: 500px;
		margin: 10px 0;
	}