.wpes-wrap {
	line-height: 1.8em;

	.dashicons-before:before {
		font-size: 30px;
		width: 30px;
	}

	h2 {
		em {
			font-style: normal;
			opacity: 0.5;
		}
	}

	.wpes-table {
		tr {
			td, th {
				padding: 0 20px 0 0;

				&.last {
					padding: 0;
				}
			}
		}

		td {
			h3 {
				margin-top: 0;
			}

			vertical-align: top;
		}

		td, th {
			width: 25%;
			vertical-align: top;
			text-align: left;

			&[colspan="2"] {
				width: 50%;
			}

			&[colspan="3"] {
				width: 75%;
			}
		}
	}
}

/**
 Settings panel
 */
.wpes-settings {

}

/**
 Admins panel
 */
.wpes-admins {
	.a-regexp {

		&.error {
			border-color: red;
			background: #ff9e8b;
		}

		&.match {
			border-color: #00a800;
			background: #97e396;
		}
	}

	.a-fail.match {
		background-color: #80ff8e
	}
}

$notice-color: #72aee6;
$error-color: #d63638;
$warning-color: #ff6700;
$success-color: #00a32a;
$border-color: #c3c4c7;
$spacing: 8px;
$tools-width: 200px;

.wpes-admin {
	width: calc(100% - #{$tools-width} - 20px);

	&.wpes-emails {
		width: initial;
	}

	* {
		box-sizing: border-box;
	}

	.inside {
		padding: $spacing * 1.5 !important;
		margin: 0 !important;
		display: flex;
		flex-direction: column;
		gap: $spacing;

		> * {
			margin: 0;
		}
		&.cols {
			display: flex;
			flex-direction: row;
		}

		&.col {
			max-width: 50%;
			flex: 1;
		}
	}

	select {
		max-width: 100%;
	}
}

.email-preview {
	width: 100%;
	height: auto;
	min-height: 600px;
}

.wpes-form {
	display: flex;
	flex-direction: column;
	gap: $spacing * 2;
}

.wpes-form-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: $spacing;

	label {
		width: 25%;
		font-weight: 700;

		@media (max-width: 768px) {
			width: 100%;
		}
	}

	input,
	select {
		&:not([type="checkbox"]):not([type="radio"]) {
			flex-grow: 1;
		}
	}

	input {
		&[type="checkbox"],
		&[type="radio"] {
			margin: 0;
		}
	}
}

.wpes-notice {
	width: 100%;
	padding: $spacing;
	border: 1px solid $border-color;
	box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
	background: #fafafa;
	display: flex;
	flex-direction: column;
	gap: $spacing;

	pre {
		white-space: normal;
	}

	.warning {
		display: block;
		width: 100%;
	}

	.title {
		display: block;
		font-size: 1.1em;

		&:not(:first-child) {
			margin-top: $spacing * 2;
		}
	}

	* {
		margin: 0;
	}

	&--info {
		@extend .wpes-notice;
		border-left: 4px solid $notice-color;
		background: lighten($notice-color, 30%);
	}

	&--error {
		@extend .wpes-notice;
		border-left: 4px solid $error-color;
		background: lighten($error-color, 44%);
	}

	&--warning {
		@extend .wpes-notice;
		border-left: 4px solid $warning-color;
		background: lighten($warning-color, 48%);
	}

	&--success {
		@extend .wpes-notice;
		border-left: 4px solid $success-color;
		background: lighten($success-color, 66%);
	}
}

.wpes-info-table {
	border-collapse: collapse;
	border: 1px solid $border-color;
	margin-top: $spacing;

	&.equal {
		th {
			width: 50%;
		}
	}

	th {
		text-align: left;
	}

	th,
	td {
		border: 1px solid $border-color;
		padding: $spacing;
	}
}

.wpes-radio-list {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: $spacing;
	align-items: center;

	&.arrow-down {
		position: relative;
		padding-left: 60px;

		&:after {
			content: '';
			background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 302.816 302.816" style="enable-background:new 0 0 302.816 302.816;" xml:space="preserve"><path id="XMLID_6_" d="M298.423,152.996c-5.857-5.858-15.354-5.858-21.213,0l-35.137,35.136     c-5.871-59.78-50.15-111.403-112.001-123.706c-45.526-9.055-92.479,5.005-125.596,37.612c-5.903,5.813-5.977,15.31-0.165,21.213     c5.813,5.903,15.31,5.977,21.212,0.164c26.029-25.628,62.923-36.679,98.695-29.565c48.865,9.72,83.772,50.677,88.07,97.978     l-38.835-38.835c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l62.485,62.485     c2.929,2.929,6.768,4.393,10.606,4.393s7.678-1.464,10.607-4.393l62.483-62.482C304.281,168.352,304.281,158.854,298.423,152.996z"/></svg>');
			width: 50px;
			height: 50px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			bottom: -10px;
			left: 0;
			transform: scaleX(-1);
		}
	}

	input {
		margin: 0;
	}

	label {
		strong {
			display: block;
		}
	}

	.wpes-field-description {
		grid-column-start: 2;
		grid-column-end: 3;
	}
}

.wpes-tools {
	position: fixed;
	bottom: 40px;
	right: 20px;
	width: $tools-width;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: $spacing;

	&--box {
		padding: $spacing;
		border: 1px solid $border-color;
		background: white;
		display: flex;
		flex-direction: column;
		gap: $spacing;

		em {
			b {
				display: block;
			}
		}

		* {
			margin: 0;
		}

		.toc {
			font-size: .85em;
			line-height: 1.6;
			display: flex;
			flex-direction: column;
			gap: $spacing / 4;

			li {
				padding-left: 10px;
				position: relative;

				&:before {
					content: '•';
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

		&__toc {
			@extend .wpes-tools--box;

			@media (max-height: 660px) {
				display: none;
			}
		}
	}
}

#email-preview {
	background: transparent;

	.postbox-header {
		background: white;
	}
}

.wpes-email-history {
	height: 400px;
	overflow: auto;
	border: 1px solid $border-color;

	thead {
		position: sticky;
		top: 0;
		background: white;

		td {
			a {
				color: inherit;
				text-decoration: none;
				display: inline-flex;
				align-items: center;
				gap: 4px;

				&:hover {
					color: #2271b1;
				}

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

	table {
		border: 0;
	}

	.eml {
		width: 100px
	}

	#the-list {
		tr {
			cursor: pointer;

			&:hover {
				background: rgba(0, 0, 0, .075);
			}

			&.active {
				background: lighten($notice-color, 25%);
			}
		}
	}
}

.wpes-emails {
	.pager {
		display: flex;
		align-items: center;
		gap: $spacing;
		margin-bottom: $spacing * 1.5;

		&:last-of-type {
			margin-top: $spacing * 1.5;
			margin-bottom: 0;
		}

		> span {
			&:first-of-type {
				display: flex;
				gap: $spacing / 2;
			}

			&:last-of-type {
				margin-left: auto;
				display: flex;
				align-items: center;
				gap: $spacing;
			}
		}

		.button {
			min-width: 38px;
			text-align: center;
			box-sizing: border-box;
		}

		strong {
			min-width: 38px;
			padding: 4px 8px;
			background: #2271b1;
			color: #fff;
			border-radius: 3px;
			text-align: center;
			display: inline-block;
			box-sizing: border-box;
		}

		.ellipsis {
			padding: 4px 8px;
		}

		select {
			height: auto;
		}
	}

	#mail-viewer {
		position: relative;
		border: 1px solid $border-color;
		height: 600px;
		width: 100%;
		display: flex;
		flex-direction: column;

		.debug, .body, .alt_body, .headers, .body-source {
			display: none;
			height: 0;
			width: 0;
		}

		.show-debug .debug, .show-body .body, .show-alt-body .alt_body, .show-headers .headers, .show-body-source .body-source {
			display: block;
			height: 100%;
			width: 100%;
		}

		&.hidden {
			display: none!important;
		}
	}

	.mail-viewer-tabs {
		display: flex;
		flex-direction: row;
		background: #f0f0f1;
		border-bottom: 1px solid $border-color;
		padding: 0;
		margin: 0;
		flex-shrink: 0;

		.mail-tab {
			background: transparent;
			border: none;
			border-right: 1px solid $border-color;
			padding: 10px 16px;
			cursor: pointer;
			display: flex;
			align-items: center;
			gap: 6px;
			font-size: 13px;
			color: #50575e;
			transition: all 0.2s ease;
			outline: none;
			flex: 1;
			justify-content: center;
			position: relative;

			&:last-child {
				border-right: none;
			}

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

			&:hover {
				background: #fff;
				color: #2271b1;
			}

			&:focus {
				box-shadow: inset 0 0 0 1px #2271b1, inset 0 0 0 2px #fff;
				outline: 2px solid transparent;
				outline-offset: 0;
			}

			&.active {
				background: #fff;
				color: #2271b1;
				font-weight: 600;
				border-bottom: 3px solid #2271b1;
				padding-bottom: 7px;
			}
		}
	}

	#mail-data-viewer {
		position: relative;
		flex: 1;
		overflow: auto;

		.email-data.show-debug, .show-body, .show-alt-body, .show-headers, .show-body-source {
			height: 100%;
			width: 100%;
		}

		.body > .body-disclaimer {
			padding: 10px;
			background: #fffae6;
			border-bottom: 1px solid $border-color;
			font-size: 0.9em;
			color: #665c00;
		}

		.show-body-source {
			pre {
				white-space: pre-wrap;
			}
		}
	}
}