// Settings - admin.php?page=wpforms-settings
// Tools - admin.php?page=wpforms-tools
.wpforms-admin-settings {

	*,
	*::before,
	*::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	// Setting rows, eg field row.
	.wpforms-setting-row {
		border-bottom: 1px solid #e4e4e4;
		padding: 30px 0;
		font-size: 14px;
		line-height: 1.3;

		&:first-of-type {
			padding-top: 10px !important;
		}

		@include media("<tablet") {
			padding: 20px 0;
		}

		// Section heading.
		&.section-heading {
			padding: 20px 0;

			&.no-desc {
				h4 {
					margin: 0;
				}
			}

			.wpforms-setting-field {
				margin: 0;
				max-width: 1000px;
			}
		}

		// Tools full width fields.
		&.tools {

			p,
			p:first-of-type{
				margin: 0 0 16px 0;
			}
		}

		// Checkbox settings field.
		&.wpforms-setting-row-checkbox {

			input[type=checkbox] {
				float: left;
				margin: 1px 0 0 0;
			}

			.desc {
				margin: 0 0 0 30px;
			}
		}

		// License settings field.
		&.wpforms-setting-row-license {

			.wpforms-setting-label {
				padding-top: 8px;
			}

			p.type {
				margin-top: 12px;
			}
		}

		// Text settings field.
		&.wpforms-setting-row-text {

			.wpforms-setting-label {
				padding-top: 8px;
			}
		}

		// Select settings field.
		&.wpforms-setting-row-select {

			.wpforms-setting-label {
				padding-top: 8px;
			}
		}

		// Radio settings field.
		&.wpforms-setting-row-radio {

			.wpforms-setting-field {

				input[type=radio] {
					margin: -3px 10px 0 0;
				}

				label {
					margin-right: 30px;
					display: inline-block;
				}
			}

		}

		// Email Template setting field.
		&#wpforms-setting-row-email-template {

			.wpforms-setting-field {

				label:before {
					content: " ";
					display: block;
					width: 155px;
					height: 180px;
					margin: 0 0 10px 0;
				}

				.option-default:before {
					background: url(../images/settings-email-html.png) center center;
				}

				.option-none:before {
					background: url(../images/settings-email-plaintext.png) center center;
				}
			}
		}

		// Radio settings field.
		&.wpforms-setting-row-image {

			.wpforms-setting-field {

				img {
					display: block;
					margin: 0 0 20px 0;
					max-width: 400px;
				}
			}
		}

		// Color picker settings field.
		&.wpforms-setting-row-color {

			.wpforms-color-picker {
				padding-left: 40px;
			}

			.minicolors-input-swatch {
				top: 7px;
				left: 7px;
				height: 21px;
				width: 21px;
				border-radius: 2px;
			}
		}

		// General elements.
		h4 {
			font-size: 20px;
			font-weight: 700;
			margin: 0 0 6px 0;
		}

		h3 {
			font-size: 24px;
			font-weight: 600;
			margin: 0 0 20px 0;
		}

		p {
			margin: 12px 0 0;
			font-size: 14px;
			line-height: 1.3;

			&:first-of-type {
				margin: 8px 0 0;
			}

			&.desc {
				font-style: italic;
				color: #666;
			}
		}

		// Form elements.
		input[type=text],
		input[type=password] {
			background-color: #fff;
			border: 1px solid #ddd;
			border-radius: 3px;
			box-shadow: none;
			color: #333;
			display: inline-block;
			vertical-align: middle;
			padding: 7px 12px;
			margin: 0 10px 0 0;
			width: 400px;
			min-height: 35px;

			@include media("<desktop") {
				width: 300px;
			}

			&:focus {
				border-color: #bbb;
			}
		}

		textarea {

		}

		button {
			margin-right: 10px;
		}

		.choicesjs-select-wrap {
			display: block;
			max-width: 400px;

			@include media("<desktop") {
				width: 300px;
			}
		}

		.progress-bar {
			background: #fff;
			border: 1px solid $orange;
			height: 30px;
			width: 100%;
			position: relative;
			border-radius: 3px;
			margin: 0 0 16px 0;

			&.complete {
				border: 1px solid $green;

				.bar {
					background-color: $green;

					&:after {
						content: none;
						display: none;
					}
				}
			}

			.bar {
				display: block;
				background: $orange;
				height: 100%;
				left: 0;
				position: absolute;
				-webkit-transition: width 0.5s ease-in-out;
				-moz-transition: width 0.5s ease-in-out;
				-o-transition: width 0.5s ease-in-out;
				transition: width 0.5s ease-in-out;

				@-webkit-keyframes progress {
					to { background-position: 60px 0; }
				}

				@-moz-keyframes progress {
				  to { background-position: 60px 0; }
				}

				@keyframes progress {
				  to { background-position: 60px 0; }
				}

				&:after {
					content: '';
					display:block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					-webkit-animation: progress 1s linear infinite;
					-moz-animation: progress 1s linear infinite;
					animation: progress 1s linear infinite;
					background-repeat: repeat-x;
					background-size: 60px 60px;
					background-image: -webkit-linear-gradient(-45deg, transparent 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
					background-image: linear-gradient(-45deg, transparent 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
				}
			}
		}
	}

	// Row label (left).
	.wpforms-setting-label {
		display: block;
		float: left;
		width: 200px;
		padding: 0;

		@include media("<tablet") {
			float: none;
			width: 100%;
			padding-bottom: 15px;
		}

		label {
			display: block;
			font-weight: 600;
		}
	}

	// Row field (right).
	.wpforms-setting-field {
		display: block;
		margin: 0 0 0 200px;
		max-width: 800px;

		@include media("<tablet") {
			margin: 0;
		}
	}

	p.submit {
		margin: 0;
		padding: 25px 0;
	}

	// Custom Captcha addon notice.
	.captcha-addon-notice {
		background-color: #fff;
		border: 1px solid $orange;
		border-radius: 3px;
		padding: 30px;
		max-width: 1000px;
		margin: 20px 0 0 0;

		img {
			float: left;
			max-width: 90px;
		}

		h5 {
			margin: 0 0 10px 120px;
			font-size: 18px;
		}

		p {
			margin: 0 0 0 120px;
			font-size: 14px;
			line-height: 1.3;
		}
	}

	// Generic info/code information.
	.info-area {
		display: block;
		width: 100%;
		max-width: 1000px;
		height: 450px;
		font-family: Menlo,Monaco,monospace;
		font-size: 12px;
		background: #fff;
		box-shadow: none;
		border: 1px solid #ddd;
		white-space: pre;
		overflow: auto;
		padding: 20px;
	}

	// Integrations tab content.
	// Legacy CSS and should be cleaned up when time permits.
	#wpforms-settings-providers {

		.wpforms-settings-provider {
			border-bottom: 1px solid #ddd;
			padding: 30px 0;

			&.focus-out {
				opacity: 0.4;
			}
		}

		.wpforms-settings-provider-header {
			cursor: pointer;
			max-width: 1000px;
		}

		.wpforms-settings-provider-logo {
			float: left;
			position: relative;

			.fa {
				position: absolute;
				top: 50%;
				margin: -9px 0 0 0;
				left: 10px;
				color: #666;
				font-size: 18px;
			}

			img {
				border: 1px solid #ddd;
				max-width: 90px;
				display: block;
				margin: 0 0 0 40px;
			}
		}

		.wpforms-settings-provider-info {
			margin: 0 0 0 160px;
			position: relative;
			padding: 20px 0 0;

			h3 {
				margin: 0 0 10px 0;
				font-size: 20px;
				font-weight: 600;
			}

			p {
				margin: 0;
				font-size: 14px;
			}

			.connected-indicator {
				color: #83c11f;
				width: 135px;
				border: 1px solid #83c11f;
				border-radius: 4px;
				padding: 8px 14px;
				font-size: 16px;
				position: absolute;
				top: 28px;
				right: 0;
				display: none;
			}
		}

		.connected .wpforms-settings-provider-info .connected-indicator {
			display: block;
		}

		.wpforms-settings-provider-accounts {
			margin: 0 0 0 160px;
			display: none;
			max-width: 840px;
		}

		.focus-in .wpforms-settings-provider-accounts {
			display: block;
		}

		.wpforms-settings-provider-accounts-list ul {
			padding: 0;
			margin: 0;

			li {
				border-bottom: 1px solid #ddd;
				margin: 0;
				padding: 10px 0;
				font-size: 14px;

				&:first-of-type {
					border-top: 1px solid #ddd;
				}

				&:last-of-type {
					margin-bottom: 16px;
				}
			}

			span.label {
				float: left;
				width: 50%;
			}

			span.date {
				color: #999;
				float: left;
				width: 35%;
			}

			span.remove {
				float: right;
				width: 15%;
				text-align: right
			}
		}

		.wpforms-settings-provider-accounts-connect {
			display: none;
			padding: 20px;
			background-color: $lightBlue;
			border: 1px solid $blue;

			input[type=text] {
				background-color: #fff;
				border: 1px solid #ddd;
				border-radius: 3px;
				box-shadow: none;
				color: #333;
				display: block;
				padding: 7px 12px;
				margin: 5px 0;
				width: 400px;
				min-height: 35px;

				&:focus {
					border-color: #bbb;
				}
			}
		}

		.focus-in .wpforms-settings-provider-accounts-connect  {
			display: block;
		}

		.wpforms-settings-provider-accounts-connect .fa {
			display: none;
		}

		.wpforms-settings-provider-accounts-connect p,
		.wpforms-settings-provider-accounts p {
			margin: 0 0 15px 0;
			font-size: 14px;
		}
	}

	// Checkbox multi-select columns.
	.checkbox-multiselect-columns {
		max-width: 600px;
		position: relative;

		&:after {
			content: ".";
			display: block;
			height: 0;
			line-height: 0;
			font-size: 0;
			clear: both;
			min-height: 0;
			visibility: hidden;
		}

		&:before {
			content: "\f0ec";
			color: #999;
			font: normal normal normal 20px/1 FontAwesome;
			text-rendering: auto;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			position: absolute;
			top: 130px;
			left: 50%;
			margin: 0 0 0 -10px;
		}

		.header {
			font-weight: 600;
			font-size: 13px;
			margin: 0;
			padding: 0 0 5px 0;
			text-align: center;
		}

		.first-column,
		.second-column {
			width: 45%;
			float: left;
		}

		.first-column {

		}

		.second-column {
			float: right;

			ul {
				li {
					padding: 10px;
				}
			}
		}

		ul {
			background-color: #fff;
			border: 1px solid #ddd;
			border-radius: 3px;
			position: relative;
			height: 250px;
			padding: 0;
			overflow-y: auto;
			margin: 0;
			list-style-type: none;

			li {
				border-bottom: 1px #eee solid;
				margin: 0;
				font-size: 14px;

				label {
					display: block;
					padding: 10px 10px 10px 32px;
					position: relative;
					vertical-align: baseline;

					&:hover {
						background-color: $orange;
						color: #fff;
					}

					&:before {
						content: "\f0c8";
						color: #ddd;
						font: normal normal normal 16px/1 FontAwesome;
						text-rendering: auto;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						position: absolute;
						top: 12px;
						left: 10px;
					}

					&.checked {
						opacity: 0.6;

						&:before {
							content: "\f14a";
							color: $green;
						}
					}
				}

				input {
					display: none;
				}
			}
		}

		.all {
			color: #999;
			display: inline-block;
			font-size: 13px;
			margin: 10px 0 0;
		}
	}

	// Other Importers. (Tools)
	#wpforms-importer-analyze {
		display: none;

		.process-count,
		p {
			font-size: 14px;
		}

		.upgrade {
			display: none;
			font-size: 14px;

			h5 {
				font-size: 18px;
				font-weight: 600;
				padding: 0;
				margin: 30px 0 20px 0;
			}

			hr {
				border: none;
				border-bottom: 1px solid #e4e4e4;
				margin: 40px 0;
			}

			.wpforms-btn {
				margin-right: 10px;
			}

			ul {
				li {
					list-style-type: disc;
					margin-left: 14px;

					&.form {
						list-style-type: none;
						margin-left: 0;
						font-weight: 700;
					}
				}
			}
		}
	}

	#wpforms-importer-process {
		display: none;

		.process-count,
		.process-completed {
			font-size: 14px;
		}

		.process-completed {
			display: none;
		}

		.status {
			margin: 20px 0 30px;
			background-color: #fff;
			border-radius: 3px;
			border: 1px solid #ddd;
			max-height: 800px;
			overflow-y: scroll;
			display: none;

			.item-wrap {

			}

			.item {
				border-bottom: 1px solid #ddd;
				padding: 20px;

				&:last-of-type {
					border: none;
				}

				p {
					font-size: 13px;
					margin: 12px 0 0;
				}

				ul {
					font-size: 13px;
					margin: 12px 0 0 16px;

					li {
						list-style: disc;
					}
				}

				.status-icon {
					display: inline-block;
					margin: 0 10px 0 0;

					&.fa-info-circle {
						color: #00a0d2
					}

					&.fa-check {
						color: #46b450
					}

					&.fa-exclamation-triangle {
						color: #ffb900
					}

					&.fa-times,
					&.fa-exclamation-circle {
						color: red;
					}
				}

				.name {
					font-size: 14px;
					float: left;
				}

				.actions {
					font-size: 14px;
					float: right;

					.sep {
						color: #ddd;
					}
				}
			}
		}
	}
}
