.dialog {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 500;
	font-size: 13px;
	opacity: 0;
	transition: opacity 0.2s ease;
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		z-index: 0;
	}
	&.open {
		opacity: 1;
	}
	.inner-wrapper {
		position: absolute;
		width: auto;
		height: auto;
		min-width: 20vw;
		min-height: 5vw;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 0.6em;
		z-index: 10;
		background: #fff;
		box-shadow: 3px 5px 3px rgba(0, 0, 0, 0.1);
		> * {
			float: left;
			clear: both;
			width: 100%;
			height: auto;
			margin: 0.25em 0;
		}
		.title {
			padding: 0 0 0.4em;
			// without this, rendering is choppy due to the .inner-wrapper's `transform`
			backface-visibility: hidden;
			border-bottom: 1px solid #f0f0f0;
			font-weight: 500;
			text-align: center;
			text-transform: uppercase;
			background: inherit;
			box-shadow: 0 8px 15px -10px rgba(0, 0, 0, 0.3);
		}
		.bottom-bar {
			float: right;
			width: auto;
		}
		.body {
			input {
				box-sizing: border-box;
				float: left;
				clear: both;
				width: 100%;
				margin: 0.7em 0 0;
				padding: 0.3em;
				font-size: inherit;
			}
		}
	}
}