body.modal-open{
	overflow: hidden;
	position: fixed;
	height: 100%;
}

.mv-modal{
	opacity: 0;
	display: none;

	padding: 0;
	position: fixed;
	inset: 0;

	z-index: 2147483647;

	background-color: var(--modal-backdrop-bg);
	padding: var(--molecule-standard-gap);

	--modal-padding: var(--molecule-standard-gap);
}

.mv-modal.open{
	opacity: 1;
	display: block;
}

.mv-modal__inner{
	display: block;
	padding: 0;

	height: 100vh;
	width: 100%;
	max-height: calc(100vh - var(--molecule-standard-gap) - var(--molecule-standard-gap));
}

.mv-modal-wrapper{
	
}

.mv-modal-wrapper__inner{
	position: relative;
}

.mv-modal-close{
	position: absolute;
	top: var(--molecule-standard-gap);
	right: var(--molecule-standard-gap);
	font-size: var(--h3-font-size-min);
	border-radius: 100%;
	line-height: 1;

	color: var(--modal-close-label);
	background-color: var(--modal-close-bg);

	display: block;
	height: 1em;
	width: 1em;
	border: 0 none;

	cursor: pointer;

	z-index: 99;
}

.mv-modal-close:hover{
	color: var(--modal-close-label-hover);
	background-color: var(--modal-close-bg-hover);
}

.mv-modal-body{
	display: grid;
	gap: var(--modal-padding);

	color: var(--modal-body-color);
	background-color: var(--modal-body-bg);
	border-radius: var(--global-radius);
	padding: var(--molecule-standard-gap);
}

.mv-modal-body--inner{
	overflow-x: hidden;
	overflow-y: scroll;
	max-height: calc(100vh - (var(--molecule-standard-gap) * 4));
}