@import "include-media";
@import "variables";
@import "general";
@import "confirm";
@import "education";
@import "loader";
@import "flyout-menu";
@import "tooltip";
@import "conditional-logic";
@import "toggle";
@import "footer";

// Screen options are hidden on load, then made visible with JS, to
// prevent it from "jumping".
#screen-meta-links,
#screen-meta {
	display: none;
}

#wp-mail-smtp-header-temp {
	position: absolute;
	margin: 0;
	top: -1px;
	left: 20px;
	right: 0;
	z-index: 99;
}

#wp-mail-smtp-header {
	border-top: 3px solid $orange;
	padding: 24px $content-padding;

	img {
		display: block;
		margin: 0;
		max-width: 242px;

		@include media("<=tablet") {
			max-width: 200px;
		}
	}
}

.wp-mail-smtp-page {
	color: $primary-text;

	a {
		color: $link;

		&:hover,
		&:active {
			color: $link-hover;
		}
	}
}

#wp-mail-smtp {
	margin: 0;

	.wp-mail-smtp-hide {
		display: none;
	}

	.wp-mail-smtp-page-title {
		min-height: 58px;
		background-color: #fff;
		font-size: 14px;
		margin: 0 0 20px 0;
		padding: 0 $content-padding;

		a.tab {
			border-bottom: 3px solid #fff;
			box-shadow: none;
			color: #666;
			display: inline-block;
			margin-right: 30px;
			padding: 20px 0 17px 0;
			text-decoration: none;

			&.active {
				border-color: $orange;
			}

			&:hover {
				border-color: #999;
			}
		}

		a.action {
			color: #fff;
			font-weight: 600;
			margin: 14px 0 14px 10px;
			line-height: 28px;
			min-height: 30px;
			vertical-align: top;

			@include media("<=phone") {
				margin-left: 0;
			}
		}

		.page-title {
			background-color: #fff;
			display: inline-block;
			font-size: 23px;
			margin: 0;
			padding: 20px 20px 20px 0;
		}
	}

	.wp-mail-smtp-page-content {
		padding: 0 $content-padding;

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

		.wp-mail-smtp-clear {
			&:before {
				content: " ";
				display: table;
			}
			&:after {
				clear: both;
				content: " ";
				display: table;
			}
		}

		// Setting rows, eg field row.
		.wp-mail-smtp-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;
			}

			&.inactive {
				display: none;
			}

			.wp-mail-smtp-setting-mid-row-sep {
				background: #e4e4e4;
				height: 1px;
				border: 0;
				margin: 15px 0;
			}

			// Section heading.
			&.section-heading {
				padding: 20px 0 10px;
				border-bottom: none;

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

				&.wp-mail-smtp-section-heading--has-divider {
					padding: 20px 0 30px;
					border-bottom: 1px solid #e4e4e4;
				}

				.wp-mail-smtp-setting-field {
					margin: 0;
					max-width: 1005px;
				}

				.desc {
					font-style: normal;
				}
			}

			// Checkbox settings field.
			&.wp-mail-smtp-setting-row-checkbox {

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

				input[type=checkbox] + label {
					margin: 0 0 0 8px;
					vertical-align: baseline;
				}

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

				input[type=checkbox] + label + .desc {
					margin: 8px 0 0 0;
				}
			}

			// Text based settings field.
			&.wp-mail-smtp-setting-row-text,
			&.wp-mail-smtp-setting-row-password,
			&.wp-mail-smtp-setting-row-number,
			&.wp-mail-smtp-setting-row-email {

				.wp-mail-smtp-setting-label {
					padding-top: 8px;
				}
			}

			// Select settings field.
			&.wp-mail-smtp-setting-row-select {

				.wp-mail-smtp-setting-label {
					padding-top: 8px;
				}
			}

			// Radio settings field.
			&.wp-mail-smtp-setting-row-radio {

				.wp-mail-smtp-setting-field {

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

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

			}

			&.wp-mail-smtp-setting-row-no-border {
				border-bottom: none;
			}

			&.wp-mail-smtp-setting-row-no-padding {
				padding: 0;
			}

			&.wp-mail-smtp-setting-row-license_key {

				.wp-mail-smtp-setting-field {

					p:first-child {
						margin-top: 0;
					}
				}
			}

			// Mailer image radio settings field.
			&.wp-mail-smtp-setting-row-mailer {
				padding-bottom: 20px;

				.wp-mail-smtp-mailers {

					.wp-mail-smtp-mailer {
						display: inline-block;
						width: 140px;
						margin-right: 12px;
						margin-bottom: 12px;
						position: relative;

						.wp-mail-smtp-mailer-image {
							background: #fff;
							text-align: center;
							border: 2px solid #E5E5E5;
							border-radius: $border-radius;
							cursor: pointer;
							height: 76px;
							position: relative;
							margin-bottom: 10px;
							-webkit-transition: all 0.2s ease-in-out;
							-moz-transition: all 0.2s ease-in-out;
							-ms-transition: all 0.2s ease-in-out;
							transition: all 0.2s ease-in-out;

							&.is-recommended {
								background-image: url(../images/recommended.svg);
								background-repeat: no-repeat;
								background-size: 60%;
								background-position: top right -2px;
							}

							img {
								max-width: 80%;
								max-height: 40px;
								display: block;
								position: relative;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								opacity: 0.6;
								-webkit-transition: all 0.2s ease-in-out;
								-moz-transition: all 0.2s ease-in-out;
								-ms-transition: all 0.2s ease-in-out;
								transition: all 0.2s ease-in-out;
							}
						}

						&.wp-mail-smtp-mailer-smtp .wp-mail-smtp-mailer-image img {
							max-height: 30px
						}

						&.active {
							.wp-mail-smtp-mailer-image {
								border-color: $orange;

								img {
									opacity: 1;
								}
							}
						}

						&:hover {
							.wp-mail-smtp-mailer-image {
								border-color: #ccc;

								img {
									opacity: 1;
								}
							}
						}
					}
				}
			}

			&.wp-mail-smtp-setting-row-alert {
				padding-top: 20px;
				padding-bottom: 25px;

				.wp-mail-smtp-setting-row {
					border: none;
				}

				.section-heading {
					margin-bottom: 25px;

					h3 {
						margin-bottom: 10px;
						font-weight: 500;
						font-size: 18px;
						line-height: 22px;
					}

					.notice {
						margin-top: 20px;

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

				.wp-mail-smtp-setting-row {
					padding: 0 !important;

					& + .wp-mail-smtp-setting-row {
						margin-top: 20px;
					}
				}

				.wp-mail-smtp-setting-label {
					label {
						font-weight: 500;
					}
				}

				.dashicons-trash {
					position: relative;
					top: 6px;
					color: #A7AAAD;
					cursor: pointer;
					transition: 0.2s;

					&:hover {
						color: $negative;
					}
				}
			}

			&#wp-mail-smtp-setting-row-alerts-twilio_sms {

				.wp-mail-smtp-setting-row-alert-connection-options {
					position: relative;

					& + .wp-mail-smtp-setting-row-alert-connection-options:before {
						content: '';
						display: block;
						max-width: 605px;
						height: 1px;
						margin-bottom: 20px;
						background-color: #DCDCDE;
					}
				}
			}

			&#wp-mail-smtp-setting-row-alerts-whatsapp {

				.wp-mail-smtp-setting-row-alert-connection-options {
					position: relative;

					& + .wp-mail-smtp-setting-row-alert-connection-options:before {
						content: '';
						display: block;
						max-width: 605px;
						height: 1px;
						margin-bottom: 20px;
						background-color: #DCDCDE;
					}

					.wp-mail-smtp-setting-row:first-child .wp-mail-smtp-setting-field {
						position: relative;

						.js-wp-mail-smtp-setting-alert-remove-connection {
							position: absolute;
							top: 8px;
							left: 415px;
						}
					}
				}
			}

			// General elements.
			h2, h4 {
				color: $primary-text;
				font-size: 20px;
				font-weight: 600;
				margin: 0 0 6px 0;
			}

			h2 {
				margin-bottom: 15px;
			}

			h3 {
				color: $primary-text;
				font-size: 24px;
				font-weight: 600;
				margin: 0 0 20px 0;
			}

			h5 {
				color: $primary-text;
				font-size: 16px;
				font-weight: 600;
				margin: 0 0 20px 0;
			}

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

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

				&.desc {
					margin: 10px 0 0;
					font-style: italic;
					color: $secondary-text;

					& + .desc {
						font-style: normal;
					}
				}
				&.buttonned {
					margin-top: 30px;
				}

				&.inline-notice {
					margin: 5px 0 15px;
					box-sizing: border-box;
					background: #fff;
					border-left: 4px solid transparent;
					box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );

					&.inline-error {
						border-color: $negative;
						margin-bottom: 5px;
						padding: 10px;
					}
					&.inline-info {
						border-color: #2171B1;
						margin-bottom: 5px;
						padding: 10px;
					}
					&.inline-edu-notice {
						border-color: #809EB0;
						line-height: 1.5em;
						padding: 10px;
					}

					a.wp-mail-smtp-mailer-notice-dismiss {
						float: right;
						color: #999DA1;
						margin: 0 0 10px 10px;
						text-decoration: none;

						&:hover {
							color: darken(#999DA1, 20%);
						}
					}
				}
			}

			ul {
				margin: 8px 0 0;

				&.list {
					li {
						margin-left: 20px;
						list-style-type: disc;
					}
				}
			}

			table {
				&.actions-list {
					td, th {
						padding: 5px 5px 5px 0;
						text-align: left;
					}

					td {
						&.email {
							padding-right: 2em;
						}
						&.status {
							width: 100px;
						}
						&.actions {
							a {
								border-bottom: 1px solid;
								display: inline-block;
								margin-right: 5px;
								text-decoration: none;

								&[class*=delete],
								&[class*=error] {
									color: $negative;

									&:hover, &:active, &:focus {
										color: darken( $negative, 20 );
									}
								}
							}
						}
					}

				}
			}

			// Form elements.
			input[type=text],
			input[type=email],
			input[type=number],
			input[type=password],
			select {
				background-color: #fff;
				border: 1px solid $field-border;
				border-radius: 4px;
				box-shadow: none;
				color: $field-text;
				display: inline-block;
				vertical-align: middle;
				padding: 7px 12px;
				margin: 0 10px 0 0;
				width: 400px;
				min-height: 36px;
				line-height: 1.3;

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

				@include media("<phone") {
					width: 100%;
					max-width: unset;
					margin-right: 0;

					& ~ button,
					& ~ .wp-mail-smtp-btn {
						margin-top: 8px;
					}
				}

				&[readonly] {
					background-color: #f9f9f9;
				}

				&.small-text {
					width: 75px;
				}

				&:focus {
					border: 1px solid #016AAB;
					box-shadow: 0 0 0 1px #016AAB;
					outline: none;
				}

				&:disabled {
					opacity: 0.6;
				}
			}

			input[type=checkbox],
			input[type=radio] {
				&:focus {
					border: 1px solid #016AAB;
					box-shadow: 0 0 0 1px #016AAB;
					outline: none;
				}
			}

			// Animate dashicon yes icon when clicking on copy button.
			.wp-mail-smtp-dashicons-yes-alt-green {
				&.wp-mail-smtp-animate {
					-webkit-animation: wp-mail-smtp-fade-in-stop-out 1s linear;
					animation: wp-mail-smtp-fade-in-stop-out 1s linear;
				}

				&.wp-mail-smtp-success {
					color: $positive;
				}
			}
		}

		.wp-mail-smtp-setting-group {
			border-bottom: 1px solid #e4e4e4;
			padding: 0 0 30px;

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

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

			.wp-mail-smtp-setting-row {
				border: none;
				padding: 30px 0 0 !important;

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

		// Row label (left).
		.wp-mail-smtp-setting-label {
			display: block;
			float: left;
			width: 205px;
			padding: 0 20px 0 0;

			&-with-tooltip {
				display: flex;
			}

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

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

		// Row field (right).
		.wp-mail-smtp-setting-field {
			display: block;
			margin: 0 0 0 205px;
			max-width: 800px;

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

			hr {
				margin: 20px 0;
			}

			.wp-mail-smtp-setting-field-row {
				display: flex;
				flex-wrap: wrap;

				& > .wp-mail-smtp-btn + .wp-mail-smtp-btn {
					margin-left: 10px;
				}
			}


			.wp-mail-smtp-setting-status-label {
				display: inline-flex;
				align-items: center;
				font-size: 12px;
				padding: 4px 8px;
				border-radius: 4px;
				background-color: #FFF4CD;
				color: #BD8600;

				&.wp-mail-smtp-setting-status-label-approved {
					background-color: #CEFAD4;
					color: #008A20;
				}

				&.wp-mail-smtp-setting-status-label-not-found,
				&.wp-mail-smtp-setting-status-label-rejected {
					background-color: #FFE2E4;
					color: #D63638;
				}

				img {
					margin-left: 4px;
					height: 12px;
					width: auto;
				}
			}

			.wp-mail-smtp-whatsapp-recheck-status {
				display: inline-flex;
				align-items: center;
				padding: 7px;
				margin-left: 5px;
				margin-right: 5px;
				text-decoration: none;
				color: #2271B1;
				font-size: 12px;

				img {
					margin-left: 4px;
					margin-right: 4px;
					height: 12px;
					width: auto;
				}

				&:hover {
					color: #135E96;
				}

				&:focus {
					outline: none;
					box-shadow: none;
				}

				&.loading {
					img {
						animation: wp-mail-smtp-spin 2s linear infinite;
					}
				}
			}
		}

		.wp-mail-smtp-submit {
			margin: 0;
			padding: 25px 0;

			.help-text {
				margin-left: 10px;
				vertical-align: middle;
			}
		}

		// Mailer Options
		.wp-mail-smtp-mailer-options {
			.wp-mail-smtp-mailer-option {
				.wp-mail-smtp-setting-row.section-heading {
					padding: 20px 0 !important;
				}

				blockquote {
					background: #E5E5E5;
					border-radius: $border-radius;
					color: #666;
					font-size: 14px;
					margin: 20px 0;
					padding: 15px;
					max-width: 1005px;
					width: 100%;
				}
			}

			.wp-mail-smtp-connected-row {
				display: flex;
				align-items: center;

				@include media("<tablet") {
					flex-direction: column;
					align-items: flex-start;
				}

				&__info {
					margin-left: 30px;

					@include media("<tablet") {
						margin-left: 0;
						margin-top: 10px;
					}
				}
			}

			p.inline-notice {
				margin-top: 10px;

				&:first-child {
					margin-top: 0;
				}

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		// Misc.
		&.wp-mail-smtp-page-general p {
			// This will remove jumpiness.
			margin: 0;
		}

		.notice-inline {
			background: #fff;
			border-left: 4px solid #fff;
			box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
			margin: 5px 0 15px;
			padding: 1px 12px;

			&.notice-success {
				border-left-color: $positive;
			}

			&.notice-warning {
				border-left-color: #ffb900;
			}

			&.notice-error {
				border-left-color: $negative;
			}

			&.notice-info {
				border-left-color: #00a0d2;
			}
		}

		.notice p,
		.notice-inline p,
		.notice p:first-of-type,
		.notice-inline p:first-of-type {
			margin: 0.5em 0;
			padding: 2px;
		}

		pre {
			white-space: pre-line;
		}

		&.active {
			display: block;
		}

		.connected-as {
			margin-left: $padding-default;

			@include media("<phone") {
				display: block;
				margin-left: 0;
				margin-top: 8px;
			}
		}
	}

	.wp-mail-smtp-admin-columns {

		& > div[class*="-column-"] {
			float: left;
		}

		.wp-mail-smtp-admin-column-20 {width: 20%}
		.wp-mail-smtp-admin-column-33 {width: 33.33333%}
		.wp-mail-smtp-admin-column-40 {width: 40%}
		.wp-mail-smtp-admin-column-50 {width: 50%}
		.wp-mail-smtp-admin-column-60 {width: 60%}
		.wp-mail-smtp-admin-column-80 {width: 80%}

		.wp-mail-smtp-admin-column-last {float: right !important}

		&:after {
			content: "";
			display: table;
			clear: both;
		}
	}

	.notice blockquote {
		margin-left: 0;
		padding: 2px;

		pre {
			margin: 0;
			white-space: pre-line;
		}
	}

	#wp-mail-smtp-reset-filter {
		clear: both;
		margin: 20px 0;
		padding: 10px;
		font-size: 15px;
		text-align: center;
		background: #fff;
		border: 1px solid #ccd0d4;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);

		a {
			text-decoration: none;
		}

		.reset {
			cursor: pointer;
			color: #a6a6a6;
			font-size: 15px;
			line-height: 18px;
			width: 18px;
			height: 18px;

			&:focus,
			&:hover {
				color: $negative;
			}
		}
	}

	// Tools -> Debug Events tab styles.
	.wp-mail-smtp-tab-tools-debug-events {
		@include media(">tablet") {
			th#event {
				width: 130px;
			}
			th#type {
				width: 80px;
			}
			th#initiator {
				width: 20%;
			}
			th#created_at {
				width: 200px;
			}
		}
	}

	// Settings -> Misc tab styles.
	.wp-mail-smtp-tab-misc {
		#wp-mail-smtp-setting-row-rate_limit_periods {
			input[type=number] {
				width: 100px;
			}
		}

		#wp-mail-smtp-setting-row-uninstall .wp-mail-smtp-danger {
			font-weight: 600;
			color: $negative;
		}
	}

	// Flatpicker (date picker) style in the WP List Table filter.
	.wp-mail-smtp-filter-date {

		@include media("<=tablet") {
			display: flex !important;
			flex-direction: column;
			align-items: flex-start;
			float: none;
			width: 100%;
			padding-right: 0;
			margin-bottom: 10px;
			max-width: 600px;
		}

		&__control {
			float: left;
			margin: 0 5px 0 0;
			min-height: 30px;
			background-color: #fff;
			vertical-align: middle;
			max-width: 210px;

			@include media("<=tablet") {
				flex-grow: 1;
				width: 100%;
				max-width: none;
				min-height: 40px;
				margin-right: 0;
				margin-bottom: 5px;
			}
		}

		&__btn {
			margin: 0;
			vertical-align: top;
		}
	}

	.wp-mail-smtp-sign-in-btn {
		display: inline-flex;
		align-items: center;
		background-color: #4285F4;
		border-radius: 2px;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
		transition: all 300ms ease-in-out;
		text-decoration: none;
		cursor: pointer;
		color: #ffffff;

		&:hover {
			box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
		}

		&:active {
			background: #3367d6;
		}

		&--disabled {
			pointer-events: none;
			background-color: #D4D3D3;
			box-shadow: none;
			color: #7F7F7F;

			.wp-mail-smtp-sign-in-icon__border,
			.wp-mail-smtp-sign-in-icon__bg {
				fill: #D4D3D3;
			}

			.wp-mail-smtp-sign-in-icon__symbol {
				fill: #7F7F7F;
			}
		}

		&__icon {
			overflow: hidden;
			border-radius: 2px;

			svg {
				display: block;
				margin: -3px;
			}
		}

		&__text {
			font-size: 14px;
			font-weight: 600;
			margin: 0 10px;
		}
	}
}

// Buttons.
.wp-mail-smtp-btn {
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	text-shadow: none;
	box-shadow: none;
	outline: none;

	.dashicons {
		font-size: 16px;
		width: 16px;
		height: 16px;
	}

	& + .wp-mail-smtp-btn {
		margin-left: 16px;
	}

	&:disabled,
	&-disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	&-disabled {
		pointer-events: none;
	}

	&.wp-mail-smtp-btn-md {
		font-size: 14px;
		font-weight: 500;
		padding: 9px 15px;
		min-height: 36px;
		line-height: 16px;
		border-width: 1px;
		border-style: solid;
	}

	&.wp-mail-smtp-btn-lg {
		font-size: 16px;
		font-weight: 600;
		padding: 16px 28px;
	}

	&.wp-mail-smtp-btn-upgrade,
	&.wp-mail-smtp-btn-cta {
		font-size: 16px;
		line-height: 20px;
		font-weight: 500;
		padding: 14px 30px;
	}

	&.wp-mail-smtp-btn-orange {
		background-color: $orange;
		border-color: $orange;
		color: #fff;

		&:hover,
		&:active,
		&:focus {
			background-color: $orange-dark;
			border-color: $orange-dark;
			color: #FFFFFF;
		}

		&:focus {
			box-shadow: 0 0 0 1px #fff, 0 0 0 3px $orange-dark;
		}
	}

	&.wp-mail-smtp-btn-secondary {
		background-color: #056AAB;
		border-color: #056AAB;
		color: #fff;

		&:hover,
		&:active,
		&:focus {
			background-color: darken(#056AAB, 5%);
			border-color: darken(#056AAB, 5%);
			color: #fff;
		}

		&:focus {
			box-shadow: 0 0 0 1px #fff, 0 0 0 3px darken(#056AAB, 5%);
		}
	}

	&.wp-mail-smtp-btn-red {
		background-color: $negative;
		border-color: $negative;
		color: #fff;

		&:hover,
		&:active,
		&:focus {
			background-color: #b32d2e;
			border-color: #b32d2e;
			color: #FFFFFF;
		}

		&:focus {
			box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e;
		}
	}

	&.wp-mail-smtp-btn-grey {
		background-color: #F8F8F8;
		border-color: #999999;
		color: #555555;

		&:hover,
		&:active,
		&:focus {
			background-color: #eee;
			border-color: #555555;
			color: #444;
		}
	}

	&.wp-mail-smtp-btn-light-grey {
		background-color: #f5f5f5;
		border-color: #ccc;
		color: #666;

		&:hover,
		&:active,
		&:focus {
			background-color: #eee;
			color: #444;
		}
	}

	&.wp-mail-smtp-btn-blueish {
		background-color: #738e9e;
		border-color: #738e9e;
		color: #fff;

		&:hover,
		&:active,
		&:focus {
			background-color: #395360;
			border-color: #395360;
			color: #fff;
		}

		&:focus {
			box-shadow: 0 0 0 1px #fff, 0 0 0 3px #395360;
		}
	}
}

a.wp-mail-smtp-btn.wp-mail-smtp-btn-md {
	line-height: 16px;
}

// Domain Checker Results section on Email Test tab.
#wp-mail-smtp-domain-check-details {
	h2 {
		color: $primary-text;
		font-size: 20px;
		line-height: 24px;
		font-weight: 600;
		margin: 28px 0 23px;
	}

	.wp-mail-smtp-domain-check-details-check-list {

		&-item {
			padding: 25px 0;
			border-top: 1px solid #E4E4E4;
			display: flex;

			&:last-child {
				padding-bottom: 0;
			}

			&-icon {
				width: 18px;
				height: 16px;
				margin-right: 10px;
			}

			&-content {
				h3 {
					text-transform: uppercase;
					font-weight: 500;
					font-size: 14px;
					line-height: 17px;
					color: $primary-text;
					margin: 0 0 4px 0;
				}

				p {
					color: $secondary-text;
					font-size: 14px;
					line-height: 20px;
					margin: 0 0 10px 0;

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

// Email Test Tab.
.wp-mail-smtp-tab-tools-test {

	.wp-mail-smtp-setting-row.section-heading {
		margin-bottom: 22px;
	}

	.wp-mail-smtp-test-email-resend {
		padding-top: 22px;
		margin-top: 22px;
		border-top: 1px solid #E4E4E4;
	}

	.wp-mail-smtp-test-email-resend a {
		font-size: 14px;
		outline: none;
		box-shadow: none;
	}

	#email-test-success {
		margin-top: 30px;
		text-align: center;

		svg {
			display: block;
			max-width: 500px;
			width: 100%;
			height: auto;
			margin: 0 auto 22px;
		}

		h2 {
			margin-top: 0;
			margin-bottom: 10px;
			font-weight: 500;
			font-size: 24px;
			line-height: 29px;
			color: $primary-text;
		}

		p {
			margin-top: 0;
			font-size: 16px;
			line-height: 24px;
			color: $secondary-text;
		}
	}

	#email-test-form {

		.wp-mail-smtp-setting-row.section-heading {
			margin-bottom: 0;
		}

		.wp-mail-smtp-btn {
			min-width: 95px;
		}

		.wp-mail-smtp-loading {
			display: none;
			margin-bottom: -2px;
		}
	}

	#wp-mail-smtp-debug {
		margin-top: 25px;

		h2 {
			margin: 20px 0 10px;
			color: $primary-text;
			font-size: 16px;
			line-height: 20px;
			font-weight: 600;
		}

		p {
			margin: 10px 0;
			color: $secondary-text;
			font-size: 14px;
			line-height: 20px;
		}

		ul {
			list-style-type: disc;
		}

		ul,
		ol {
			margin: 10px 0 10px 15px;
			color: $secondary-text;
			font-size: 14px;
			line-height: 20px;

			li {
				margin: 0 0 8px 0;

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

				ul {
					list-style-type: disc;
				}
			}
		}

		.dashicons-star-filled {
			color: $orange;
			width: 16px;
			height: 16px;
			font-size: 16px;
			vertical-align: text-top;
		}

		.price-off {
			color: $positive;
			font-weight: 600;
		}

		.error-log-button-container {
			margin-bottom: 22px;
		}

		.error-log-toggle {
			float: left;
			margin-right: 10px;
		}

		.error-log-copy {
			min-width: 122px;

			.error-log-copy-back {
				display: none;
			}
		}

		.error-log-copy-copied {

			.error-log-copy-front {
				display: none;
			}

			.error-log-copy-back {
				display: inline;
			}
		}

		.error-log {
			padding-top: 10px;
			padding-bottom: 10px;
			display: none;

			&.error-log-selection {
				display: block !important;
				opacity: 0;
				height: 0;
				padding: 0;
				margin: 0;
			}

			pre {
				margin: 0;
			}
		}
	}
}

.wp-mail-smtp-tab-tools-action-scheduler {

	.wp-mail-smtp-page-content {
		.wrap, .subsubsub {
			margin: 0;
		}

		& > h1 {
			color: $primary-text;
			font-size: 20px;
			font-weight: 600;
			margin: 0 0 15px 0;
			padding: 0;
		}

		& > p {
			font-size: 14px;
		}

		h1.wp-heading-inline,
		span.subtitle {
			display: none;
		}

		hr.wp-header-end {
			visibility: hidden;
			margin: -2px 0 0;
		}
	}
}

.wp-mail-smtp-admin-page-body {

	/* Lightbox library global styles. */
	.lity {
		z-index: 999999999;
		padding: 20px;
	}

	.lity-close {
		margin: 10px;
	}

	.lity-content {
		max-width: 80vw;
		max-height: 80vh;

		img {
			max-height: 80vh !important;
			max-width: 80vw !important;
		}
	}
}

// The single Debug Event popup preview.
.wp-mail-smtp-debug-event-preview {
	text-align: left;

	h4 {
		margin: 15px 0;
		font-size: 18px;
	}

	.wp-mail-smtp-debug-event-preview-subtitle {
		margin-bottom: 30px;
		text-align: center;

		span {
			color: $secondary-text;
			font-size: 16px;
			line-height: 22px;
		}
	}

	.wp-mail-smtp-debug-event-row {
		padding: 20px 0;
		border-top: 1px solid #dddddd;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 16px;
		line-height: 22px;

		.debug-event-label {
			width: 60px;
			margin-right: 30px;
			font-weight: 500;
		}

		.debug-event-value {
			width: calc( 100% - 90px );
		}

		.debug-event-initiator {
			display: inline-block;
			margin-bottom: 5px;
		}

		.debug-event-code {
			color: $secondary-text;
		}

		&:last-child {
			border-bottom: 1px solid #dddddd;
		}
	}

	.wp-mail-smtp-debug-event-preview-content {
		> div {
			word-break: break-word;
		}
	}
}

[class^="wp-mail-smtp-dashicons"] {
	display: inline-block;
	width: 20px;
	height: 20px;
}

.wp-mail-smtp-dashicons-yes-alt-green {
	background-image: url('../images/icons/dashicons/dashicons-yes-alt-green.svg');
}

.wp-mail-smtp-dashicons-pdf-gray {
	background-image: url('../images/icons/dashicons/dashicons-pdf-grey.svg');
}

@keyframes wp-mail-smtp-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
