//
// Variables
//

$white: #ffffff !default;
$grey-lightest: #f9f9f9 !default;
$grey-lighter: #f1f1f1 !default;
$border-color: #dddddd !default;
$accent-color: #0073aa !default;
$text-color: #333333 !default;
$text-color-light: #949494 !default;
$text-color-dark: #23282d !default;

$color-warning: #fefff1 !default;
$color-danger: #ffabab !default;
$color-info: #f6feff !default;

$color-green: #e5f5ed !default;
$color-red: #f5e5e6 !default;

$border-radius-base: 3px !default;

//
// Tabs
//

.inside {
	> .convert-plugin-meta-tabs {
		margin-top: 11px;
	}
}

.convert-plugin-meta-tabs {
	overflow: hidden;
	width: 100%;
	transition: opacity .25s ease;

	&.loading {
		opacity: 0.5;
		pointer-events: none;
	}
}

.convert-plugin-meta-tabs-vertical {
	display: flex;
}

.convert-plugin-meta-tabs-nav {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;

	.convert-plugin-meta-tabs-vertical & {
		flex-direction: column;
		align-items: flex-start;
		width: 150px;
		flex: none;
	}
}

.convert-plugin-meta-tabs-nav-item {
	margin: 0 -1px 0 0;

	a {
		display: block;
		padding: 15px 25px;
		border: 1px solid $border-color;
		background-color: $white;
		border-bottom-width: 0;
		text-decoration: none;
		color: $text-color;
	}

	a:hover,
	a:focus,
	a:active,
	&.convert-plugin-meta-tabs-nav-item-active a {
		background: $grey-lighter;
		color: $accent-color;
		outline: none;
		box-shadow: none;
	}

	.convert-plugin-meta-tabs-vertical & {
		width: 100%;

		a {
			padding: 8px 15px;
			margin: 0 0 -1px 0;
			border-bottom-width: 1px;
		}
	}

	// Don't show active tabs on loading
	.loading & {
		&.convert-plugin-meta-tabs-nav-item-active {
			a {
				border: 1px solid $border-color;
				background-color: $white;
				color: $text-color;
			}
		}
	}
}

.convert-plugin-meta-tabs-content {
	padding: 10px;
	border: 1px solid $border-color;
	background: $grey-lightest;

	&:not(:first-of-type) {
		display: none;
	}

	.convert-plugin-meta-tabs-vertical & {
		flex: auto;
		padding: 30px;
		min-height: 300px;
		background: $white;
		margin-left: -1px;
	}
}

.convert-plugin-tab-secondary-section {
	background: $white;
	border: 1px solid $border-color;
	margin-left: -1px;
	padding: 30px;
}

//
// Setting controls
//

.convert-plugin-setting-wrap {
	display: flex;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid $grey-lighter;
}

.convert-plugin-setting-labels {
	width: 50%;
	flex: none;
	padding-right: 15px;
}

.convert-plugin-setting-label {
	display: block;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: $text-color-dark;
}

.convert-plugin-setting-description {
	display: block;
	margin: 0;
	color: $text-color-light;

	strong {
		color: $text-color;
	}
}

//
// Setting control form fields
//

.convert-plugin-setting-control {
	flex: auto;
	max-width: 305px;

	> [type="text"],
	> [type="password"],
	> [type="number"],
	> [type="date"],
	> [type="email"],
	> [type="url"],
	> [type="search"],
	> [type="tel"],
	> select {
		width: 100%;
	}

	textarea,
	[multiple] {
		width: 100%;
		min-height: 90px;
	}

	[type="checkbox"],
	[type="radio"] {
		margin: 0 5px 0 0;
	}
}

.convert-plugin-setting-control-checkbox,
.convert-plugin-setting-control-radio {
	display: flex;
	align-items: center;
	margin: 5px 0;
}

//
// Alerts
//

.convert-plugin-alert {
	padding: 10px;
	border-radius: $border-radius-base;
	background-color: $grey-lightest;
	border: 1px solid $grey-lighter;
	margin-bottom: 15px;
}

.convert-plugin-alert-warning {
	background-color: $color-warning;
	border-color: rgba(darken($color-warning, 75%), .2);
}

.convert-plugin-alert-danger {
	background-color: $color-danger;
	border-color: rgba(darken($color-danger, 80%), .2);
	color: darken($color-danger, 55%);
}

.convert-plugin-alert-info {
	background-color: $color-info;
	border-color: rgba(darken($color-info, 80%), .2);
	color: darken($color-info, 80%);
}

//
// Controls
//

@import "controls/color/style";
@import "controls/range/style";
@import "controls/spacing/style";
@import "controls/typography/style";
@import "controls/image-bg/style";
@import "controls/file-select/style";
@import "controls/gallery/style";
@import "controls/separator/style";

//
// Responsive Controls
//

.convert-responsive-controls-tablet,
.convert-responsive-controls-mobile {
	display: none;
}

.button-group-devices {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	right: -7px;

	button {
		cursor: pointer;
		background: 0 0;
		border: none;
		height: 26px;
		padding: 0 1px;
		margin: 0;
		box-shadow: none;
		border: 0;

		&:focus,
		&:active {
			box-shadow: none;
		}

		&::before {
			display: inline-block;
			-webkit-font-smoothing: antialiased;
			font: normal 15px/17px dashicons;
			vertical-align: top;
			margin: 0 0;
			padding: 2px 4px;
			color: $text-color-light;
		}
	}

	.has-values {
		&::before {
			color: rgba($accent-color, .5);
		}
	}

	.active {
		&::before {
			color: $accent-color;
		}
	}

	.preview-desktop {
		&::before {
			content: "\f472";
		}
	}

	.preview-tablet {
		&::before {
			content: "\f471";
		}
	}

	.preview-mobile {
		&::before {
			content: "\f470";
		}
	}
}

//
// Global section hooks
//

.ci-hooks-wrap {
	margin-bottom: 20px;
	padding: 30px;

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

.ci-inclusions-wrap {
	background-color: $color-green;
}

.ci-exclusions-wrap {
	background-color: $color-red;
}

.ci-locations-wrap {
	background-color: $grey-lightest;
}

.ci-hooks-label {
	font-weight: bold;
	margin-bottom: 10px;
}

.ci-hook-row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.ci-hook-select {
	margin-right: 15px;
	flex: auto;
	width: 45%;

	select,
	input {
		width: 100%;
	}

	select {
		&:empty {
			display: none;
		}
	}
}

.ci-hook-input-priority {
	margin-right: 15px;
	flex: auto;
	max-width: 100px;

	input {
		max-width: 100px;
		width: 100%;
		display: block;
	}
}

.ci-hook-input-hook {
	margin-right: 15px;
	flex: auto;

	input {
		width: 100%;
		display: block;
	}
}

.ci-hook-dismiss {
	padding: 0;
	margin: 0 0 0 auto;
	background: none;
	appearance: none;
	box-shadow: none;
	border: 0;
	line-height: normal;
	cursor: pointer;
	flex: none;

	.ci-locations-wrap & {
		margin-top: 18px;
	}
}

.ci-repeatable-template {
	display: none;
}