//
// Exported selectors
//
#overlay {
	position: fixed;
	z-index: 999998;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .7;
	filter: alpha(opacity=70);
}

.#{$global-class-prefix}ui {

	.dialog-container {
		position: fixed;
		z-index: 999999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: none;
		pointer-events: none;

		&.is-visible {
			display: table;
		}
	}

	.dialog {
		display: table-cell;
		vertical-align: middle;

		&__inner {
			width: 475px;
			max-width: 100%;
			margin: auto;
			pointer-events: all;
			background-color: #fff;
			border: 1px solid $border-color;

			@include user-select( none );
			@include box-shadow( 0 2px 5px 0 rgba( 0, 0, 0, 0.16 ), 0 2px 10px 0 rgba( 0, 0, 0, 0.12 ) );
		}

		&__container {
			position: relative;
			padding-left: 14px;
			padding-right: 14px;
		}

		&__header {
			@include clearfix;
		}

		&__title {
			display: block;
			float: left;
			padding-left: 14px;
			overflow: hidden;
			width: calc( 100% - 60px );

			h2 {
				margin: 0;
				font-size: 20px;
				font-weight: 300;
				line-height: 60px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		&__close {
			float: right;
			padding: 0;
			margin: 0;
			width: 60px;
			color: #a0a5aa;
			text-align: center;
			border: none;
			background-color: transparent;
			box-shadow: none;
			cursor: pointer;

			@include transition( background-color $global-transition-duration ease-in-out );

			&::after {
				content: "\f335";
				font: normal 22px/58px dashicons;
			}

			&:hover,
			&:focus {
				color: #23282d;
			}

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

			&:disabled {
				color: #a0a5aa;

				&:hover,
				&:focus {
					color: #a0a5aa;
					background-color: #fff;
				}
			}
		}

		&__tabs {

			.tab {
				padding: 10px 14px 11px;
				cursor: pointer;
				display: inline-block;
				color: #a0a5aa;

				&:hover,
				&:focus,
				&.is-active {
					color: #555;
				}

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

		&__section {
			border-top: 1px solid #ddd;
			padding: 15px 12px;
			min-height: 250px;
			max-height: 500px;
			overflow-y: auto;
		}

		&__footer {
			margin: 14px;
			text-align: right;
		}
	}
}