@import './schema.scss';

/*
$modal-panel-small-width:;
$modal-panel-normal-width:;
$modal-panel-big-width:;
*/

@mixin modal-panel($width, $height) {
	max-width:97%;
	max-height:97%;

	width: $width;
	min-height: $height;
	overflow:auto;
}

.modal-panel {
	overflow-y:auto;
	border:2px solid #C0C0C0;
	padding:20px;

	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);

	background-color: $theme-canvas-color;
}

@media (min-width: $screen-sm-min) {
	.modal-panel-small {

	}
//	@include make-align(sm);
}

@media (min-width: $screen-md-min) {
	.modal-panel-small {
		@include modal-panel(450px, 250px);
	}

	.modal-panel {
		@include modal-panel(600px, 250px);
	}

	.modal-panel-big {
		@include modal-panel(800px, 250px);
	}
}

@media (min-width: $screen-lg-min) {
//	@include make-align(lg);
}

@media (min-width: $screen-xl-min) {
//	@include make-align(xl);
}