// Styling tweaks for jQuery-confirm JS alert library.
body.wp-mail-smtp-admin-page-body {

	div.jconfirm {

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

		.jconfirm-bg {
			background-color: rgba(114, 119, 124, 0.75);
			opacity: 1;
		}

		.jconfirm-box {
			padding: 30px;
			border-radius: 6px;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
			border-top-width: 4px;

			div.jconfirm-closeIcon {
				color: rgba(0, 0, 0, 0.4);
				top: 8px;
				right: 8px;

				&:hover {
					color: rgba(0, 0, 0, 0.80);
				}
			}

			div.jconfirm-title-c {
				margin: 0 0 15px 0;
				padding: 0;

				.jconfirm-icon-c {
					margin: 0 0 30px;
					-webkit-transition: none;
					transition: none;
					-webkit-transform: none !important;
					-ms-transform: none !important;
					transform: none !important;

					&:empty,
					i:empty {
						display: none;
					}
				}

				.jconfirm-title {
					display: block;
					color: $primary-text;
					font-weight: 500;
					font-size: 24px;
					line-height: 29px;
				}
			}

			div.jconfirm-content-pane {
				display: block;
				margin-bottom: 30px;

				.jconfirm-content {
					margin-bottom: 0;
					overflow: inherit;
				}
			}

			div.jconfirm-content {
				font-size: 16px;
				color: $primary-text;
				line-height: 1.4;

				p {
					margin: 0 0 20px;
					font-size: 16px;
					line-height: 1.5;

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

					&.large {
						font-size: 18px;
					}

					&.small {
						font-size: 14px;
					}
				}

				.wp-mail-smtp-debug-event-preview p {
					font-size: 14px;
				}

				.wp-mail-smtp-btn {
					font-weight: 600;
					text-transform: uppercase;
					-webkit-transition: background .1s;
					transition: background .1s;
					padding: 10px 20px;
					outline: none;
					display: inline-block;
					font-size: 14px;
					line-height: 1.4;
					-ms-touch-action: manipulation;
					touch-action: manipulation;
					cursor: pointer;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
					border-radius: 4px;
					min-height: 1em;
					-webkit-tap-highlight-color: transparent;
					border: 0;
					background-image: none;

					&.with-loader {
						padding: 12px 12px 7px;
					}
				}
			}

			div.jconfirm-buttons {
				padding: 0;

				button {
					transition: 0.2s;
					box-shadow: none;
					margin: 0 10px 0;

					&:hover {
						box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.1);
					}

					&.btn-confirm {
						color: #fff;
						outline: none;
						border: 1px solid $orange;
						background-color: $orange;
					}

					&.btn-cancel {
						color: #777777;
						outline: none;
						background: #F8F8F8;
						border: 1px solid #CCCCCC;
					}

					&,
					&.btn-default {
						color: #666;
					}

					&.btn-hide {
						display: none;
					}

					&.btn-block {
						display: block;
						text-align: center;
						width: 100%;
						margin: 0 0 10px 0 !important;
					}

					&.btn-normal-case {
						text-transform: none !important;
					}
				}
			}

			&.jconfirm-type-green {
				border-color: $modal-green;

				div.jconfirm-buttons button.btn-confirm {
					background-color: $modal-green;
					border-color: $modal-green;
				}
			}

			&.jconfirm-type-orange {
				border-color: $modal-orange;

				div.jconfirm-buttons button.btn-confirm {
					background-color: $modal-orange;
					border-color: $modal-orange;
				}
			}

			&.jconfirm-type-red {
				border-color: $modal-red;

				div.jconfirm-buttons button.btn-confirm {
					background-color: $modal-red;
					border-color: $modal-red;
				}
			}

			&.jconfirm-type-blue {
				border-color: $modal-blue;

				div.jconfirm-buttons button.btn-confirm {
					background-color: $modal-blue;
					border-color: $modal-blue;
				}
			}

			&.loading {
				border-top-color: #fff !important;
				height: 160px;

				.jconfirm-title-c {
					display: block !important;
					position: relative;
					z-index: 4;

					.jconfirm-icon-c {
						display: none;
					}
				}

				&:before {
					z-index: 2;
				}

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					top: 68%;
					margin-left: -20px;
					height: 40px;
					width: 40px;
					border: solid 6px transparent;
					border-bottom-color: $orange;
					opacity: 1;
					z-index: 3;
				}
			}
		}

		.jconfirm-box.wp-mail-smtp-upgrade-mailer-education-modal {
			padding: 30px 30px 15px;
			border-top: none;

			div.jconfirm-title-c {
				margin: 0 0 26px 0;
				padding: 0;

				.jconfirm-icon-c {
					margin-bottom: 20px;
					color: #c4c4c4 !important;

					svg {
						height: 35px;
					}
				}
			}

			div.jconfirm-content-pane {
				margin-bottom: 25px;
			}

			div.jconfirm-buttons button.btn-confirm {
				background-color: $orange;
				border-color: $orange;
			}

			.discount-note {
				text-align: center;
				margin: 45px 0 0;

				p {
					background-color: #fcf9e8;
					margin: 0 -30px;
					padding: 24px 60px 20px;
					font-size: 15px;
					color: #4d4d4d;
					position: relative;

					&:after {
						content: url(../images/font-awesome/check-circle-solid-green.svg);
						width: 40px;
						height: 40px;
						background-color: #fff;
						border-radius: 50%;
						padding: 5px 6px;
						position: absolute;
						top: -20px;
						right: 50%;
						margin-right: -18px;
					}
				}

				span {
					font-weight: 600;
					color: $positive;
				}

				a {
					color: #aaa;
					display: block;
					margin-top: 12px;
				}
			}
		}
	}
}
