//
// Dialog
//

.dialog-widget {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 9999;
}

.dialog-widget-content {
	background-color: #fff;
	position: absolute;
	border-radius: 3px;
	box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);
}

.dialog-widget-header, .dialog-message {
	text-align: center;
}

.dialog-message {
	font-size: 12px;
	line-height: 1.5;
}

.dialog-buttons-wrapper {
	border-top: 1px solid $editor-background;
	text-align: center;

	> button {
		border: none;
		background: none;
		font-size: 15px;
		cursor: pointer;
		padding: 13px 0;
		outline: 0;

		&:first-child {
			color: $editor-dark;
		}

		&.dialog-ok {
			color: $editor-warning;
		}

		&.dialog-take_over {
			color: $editor-success;
		}

		&:active {
			background-color: fade-out($editor-background, .5);
		}

		&::-moz-focus-inner {
			border: 0;
		}
	}
}

.dialog-widget-header {
	padding: 20px 0;
	font-weight: 500;
}

.dialog-options-widget,
.dialog-confirm-widget {

	.dialog-widget-header {
		font-size: 15px;
		color: $editor-darkest;
	}

	.dialog-buttons-wrapper {

		> button {
			width: 50%;

			&:first-child {
				@include border-end(1px solid $editor-background);
			}

			&:hover {
				background-color: lighten( $editor-background, 5%);
			}
		}
	}
}

.dialog-options-widget, .dialog-confirm-widget, .dialog-alert-widget {
	-webkit-user-select: none;
	-moz-user-select: none;

	.dialog-widget-content {
		margin: auto;
		width: 375px;
	}

	.dialog-message {
		padding: 0 20px;
		min-height: 50px;
	}
}

.dialog-alert-widget {

	.dialog-buttons-wrapper {

		> button {
			width: 100%;
		}
	}
}

// Modal widget
.dialog-lightbox-close-button {
	cursor: pointer;
	position: absolute;
	top: 16px;
	@include end(20px);
	font-size: 16px;
	color: #ffffff;
	opacity: .65;

	&:hover {
		opacity: 1;
	}
}