.spin-modal {
	--menuTop: calc(var(--adminBarHeight) + var(--utilityHeight));
	--menuHeight: calc(var(--innerHeight) - var(--adminBarHeight) - var(--utilityHeight));

	position: fixed;
	top: var(--menuTop);
	left: 0;
	z-index: 1000;

	width: 100%;
	height: var(--menuHeight);

	opacity: 0;

	transition: all .6s ease-in-out;
}
body.scrolled .spin-modal {
	--menuTop: calc(var(--adminBarHeight) + var(--utilityHeightShortened));
	--menuHeight: calc(var(--innerHeight) - var(--adminBarHeight) - var(--utilityShortenedHeight));
}
.spin-modal.open {
	opacity: 1;
}


.spin-modal.top,
.spin-modal.right,
.spin-modal.bottom,
.spin-modal.left {
	opacity: 1;

	clip-path: inset(0 0 0 0);
}

.spin-modal .modal-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;

	width: 100%;
	height: 100%;

	transition: all .6s ease-in-out;
}

.spin-modal.top .modal-wrapper {
	transform: translate3d(0, -100%, 0);
}
.spin-modal.right .modal-wrapper {
	transform: translate3d(100%, 0, 0);
}
.spin-modal.bottom .modal-wrapper {
	transform: translate3d(0, 100%, 0);
}
.spin-modal.left .modal-wrapper {
	transform: translate3d(-100%, 0, 0);
}
.spin-modal.open.top .modal-wrapper,
.spin-modal.open.right .modal-wrapper,
.spin-modal.open.bottom .modal-wrapper,
.spin-modal.open.left .modal-wrapper {
	transform: translate3d(0, 0, 0);
}

.spin-modal .modal-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

	width: 100%;
	height: 100%;

	background-color: rgba(0, 0, 0, .7);
	
	transition: all .6s ease-in-out;
	
	opacity: 0;
}
.spin-modal.open .modal-bg {
	opacity: 1;
}

.spin-modal.modal-overlay .modal-content {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;

	width: 100%;
	height: 100%;

	overflow-y: auto;
}
.spin-modal.modal-overlay .modal-content {
	--doubleBoxPadding: calc(2 * var(--boxPadding));

	top: var(--boxPadding);
	left: var(--boxPadding);

	width: calc(100% - var(--doubleBoxPadding));
	height: calc(100% - var(--doubleBoxPadding));
}

.spin-modal .modal-close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;

	width: var(--boxPadding);
	height: var(--boxPadding);

	display: flex;
	align-items: center;
	justify-content: center;
}
.spin-modal.modal-overlay .modal-close {
	top: var(--boxPadding);
	right: var(--boxPadding);
}