@import 'search';
@import 'preferences';
@import 'notices';

.modal {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
	z-index: 1100;
}

.modal--open {
	visibility: visible;
	z-index: 2000;

	.modal__header {
		opacity: 1;
	}

	.modal__content {
		opacity: 1;
	}
}

.modal__container {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
}

.modal__header {
	padding: 16px;
}

.modal__content {
	padding: 16px;
}

.modal__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background-color: rgba( 0, 0, 0, 0.2);
	opacity: 0.5;
}

.modal__button-close {
	position: absolute;
	right: 16px;
	top: 16px;
	@include font-size(16);
	z-index: 1;
	cursor: pointer;
}

body.modal-opened {
	overflow: hidden;
}

.admin-bar {
	.modal {
		top: 32px;
	}
}

@media ( max-width: 780px ) {
	.admin-bar {
		.modal {
			top: 46px;
		}
	}
}

@media ( max-width: 600px ) {
	.admin-bar {
		.modal {
			top: 0;
		}
	}
}