$modal-padding: 24px;

.modal-backdrop {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	background: rgba(0, 0, 0, 0.4);
	z-index: 10000;
	justify-content: center;
	align-items: center;
	
	.modal-container {
		width: 380px;
		height: auto;
		background: #010a13;
		border: 1px solid #785a28;
		position: relative;
		
		&:before, &:after {
			position: absolute;
			display: block;
			content: "";
			@include calc(width, '100% - 10px');
			height: 2px;
			left: 4px;
			background: #785a28;
		}
		
		&:before {
			top: -5px;
		}
		
		&:after {
			bottom: -5px;
		}
		
		.modal-close {
			width: 36px;
			height: 36px;
			display: block;
			position: absolute;
			border-radius: 50%;
			background: #010a13;
			border: 1px solid #785a28;
			right: -18px;
			top: -18px;
			
			> div {
				border: 1.5px solid #bda36c;
				border-radius: 50%;
				color: #bda36c;
				margin: 2px;
				font: 14px/27px "C5AUI";
				text-align: center;
			}
			
			&:hover {
				cursor: pointer;
				
				> div {
					color: #f1e6d4;
				}
			}
		}
		
		.modal-header {
			padding: $modal-padding $modal-padding $modal-padding * 5/8;

			.modal-header-inner {
				font: bold 20px/24px Alegreya SC;
				color: #f1e6d4;
				letter-spacing: 0.1em;
				text-transform: uppercase;
			}
		}
		
		.modal-content {
			position: relative;
			@include calc(height, "100% - 77px");

			.modal-content-inner {
				color: #878683;
				font: 11px/16px "Source Sans Pro";
				letter-spacing: 0.05em;
				padding: 0 $modal-padding 55px;
				
				p {
					margin-top: 14px;

					span.link {
						color: #015175;
						display: block;
						letter-spacing: 0.03em;
						line-height: 22px;
						
						&:hover {
							color: #3685a7;
							cursor: pointer;
						}
					}
				}

				> div {
					&:first-child {
						margin-top: 0;
					}
					
					margin-top: 14px;
				}
			}
		}
			
		.dialog-buttons {
			display: flex;
			justify-content: center;
			position: absolute;
			width: 100%;
			height: 32px;
			left: 0;
			bottom: -1px;
			
			> .dialog-buttons-inner {
				background: #010a13;
				position: relative;
				padding: 0 1px;
				
				> div {
					box-shadow: 0 none;
					margin: 0 1px;
				
					&:first-child:before, &:last-child:after {
						position: absolute;
						display: block;
						content: "";
						height: 11px;
						width: 1px;
						bottom: 0;
						background: #785a28;
					}
					
					&:first-child:before {
						left: -1px;
					}
					
					&:last-child:after {
						right: -1px;
					}
				}
			}
		}
	}
}