@header-bg: #eee;
@header-bottom-border: #ccc;
@header-bottom-padding: 15px;
@header-top-padding: 15px;
@header-side-padding: 10px;

@footer-bottom-height: 10px;
@footer-bottom-padding: 15px;
@footer-top-padding: 15px;
@footer-side-padding: 10px;

@backdrop-bg: #000;
@backdrop-opacity: 0.7;

@content-bg: #fff;

@body-content-padding: 15px;

@modal-padding: 30px;
@icon-size: 30px;

#wp-mail-logging-modal {

	&-wrap {
		display: none;
	}

	&-backdrop {
		background: none repeat scroll 0 0 @backdrop-bg;
		bottom: 0;
		left: 0;
		min-height: 360px;
		opacity: @backdrop-opacity;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 159900;
	}

	&-content {
		background: none repeat scroll 0 0 @content-bg;
		bottom: 0;
		left: 0;
		margin: auto;
		max-width: 650px;
		min-height: 300px;
		padding: 15px;
		position: absolute;
		right: 0;
		top: 0;

		&-wrap {
			bottom: @modal-padding;
			left: @modal-padding;
			position: fixed;
			right: @modal-padding;
			top: @modal-padding;
			z-index: 300010;
		}

		&-header {
			background-color: @header-bg;
			border-bottom: 1px solid @header-bottom-border;
			left: 0;
			padding: @header-top-padding @header-side-padding @header-bottom-padding @header-side-padding;
			position: absolute;
			right: 0;
			top: 0;
			font-size: 26px;

			&-close {
				height: 30px;
				position: absolute;
				right: 10px;
				text-decoration: none;
				top: 35%;
				width: 30px;
				z-index: 1000;
			}

			&-icon {
				float: left;
				font-size: @icon-size;
				width: @icon-size;
				height: @icon-size;
			}

			&-title {
				float: left;
				line-height: @icon-size;
				padding-left: 5px;
			}

			&-format-switch {
				float: right;
				line-height: @icon-size;
				padding-right: 45px;
			}
		}

		&-body {
			bottom: @footer-top-padding + @footer-bottom-padding + @footer-bottom-height;
			left: 0;
			position: absolute;
			overflow: auto;
			right: 0;
			top: @icon-size + @header-top-padding + @header-bottom-padding;

			&-content {
				position: relative;
				padding: @body-content-padding;
			}

			& .info {
				border-left: 4px solid #ffba00;
				display: block;
				background: #FFF9E9;
				-webkit-box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
				box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
				margin: 5px 5px 2px;
				padding: 1px 12px;
			}

			& .title {
				font-weight: bold;
				display: block;
			}

		}

		&-footer {
			background-color: @header-bg;
			border-top: 1px solid @header-bottom-border;
			bottom: 0;
			left: 0;
			padding: @footer-top-padding @footer-side-padding @footer-bottom-padding @footer-side-padding;
			position: absolute;
			right: 0;
			text-align: right;

			.wp-mail-logging-modal-close {

				margin-bottom: 0;

			}

		}

	}
}