// main: ../meta-boxes.scss

#wp_quiz_meta_box_trivia, #wp_quiz_meta_box_personality, #wp_quiz_meta_box_swiper, #wp_quiz_meta_box_flip, #wp_quiz_meta_box_fb_quiz {
	border: 0;
	background: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
	z-index: 9;

	.hndle.ui-sortable-handle,
	.handlediv {
		display: none;
	}

	.inside,
	.wp-quiz-meta-box-wrap #wp_quiz_meta_box-setting-panel-content {
		padding: 0;
	}
}

#wp_quiz_meta_box-setting-panel-styling, #wp_quiz_meta_box-setting-panel-settings {
	padding: 25px 15px 0;

	border: 1px solid #e5e5e5;
	background: #fff;
}

.wp-quiz-meta-box-wrap {
	.default-tab-wrapper {
		margin-bottom: 20px;
		padding: 10px 0 0;

		a {
			font-size: 14px;
			font-weight: 600;

			position: relative;

			float: left;

			-webkit-box-sizing: border-box;
							box-sizing: border-box;
			margin-left: 7px;
			padding: 8px 16px 4px 12px;

			white-space: nowrap;
			text-decoration: none;

			color: #555;
			border: 1px solid #ccc;
			outline: none;
			background: #e5e5e5;
			-webkit-box-shadow: none;
							box-shadow: none;

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

			&.active {
				bottom: -1px;

				margin-top: -1px;
				padding-bottom: 5px;

				background: #fff;
			}

			.dashicons,
			.fa {
				font-size: 14px;

				min-width: 20px;
				margin-right: 5px;
				padding-top: 2px;

				text-align: center;

				color: #444;
			}
		}
	}

	.wp-quiz-setting-panel {
		display: none;

		padding: 0 10px;
	}

	.wp-quiz-video-upload-preview {
		position: relative;
		max-width: 100%;
		height: 0;
		overflow: hidden;
		background: #ccc;
		padding-bottom: 56.25%; // 4:3

		.wp-video {
			width: 100%!important;
			height: 100%!important;
		}

		iframe {
			position: absolute;
			height: 100%;
			width: 100%;
			left: 0;
			top: 0;
		}
	}

	.description {
		margin-top: 5px;
		display: block;
	}
}

.wp-quiz-settings {
	padding: 20px;
}

.wq-quiz-settings-tab {
	$active-color: #57596C;

	@extend %border-box;

	.ui-tabs-nav {
		border-bottom: 4px solid $active-color;

		li {
			font-weight: bold;

			display: inline-block;

			margin: 0 2px 0 0;

			text-align: center;

			&.ui-state-active {
				a {
					color: #fff;
					background-color: $active-color;
				}
			}
		}

		a {
			line-height: 43px;

			display: block;

			padding: 0 50px;

			text-decoration: none;

			color: $active-color;
			border: 1px solid #e5e5e5;
			border-bottom: 0;
			border-radius: 4px 4px 0 0;
			background-color: #f1f1f1;
			-webkit-box-shadow: none;
							box-shadow: none;
		}
	}
}