_modals.scss

/*! 
* Spry Modals
*/
@keyframes modalAlert {
	20% {
		transform: scale(1.03);
	}
	40% {
		transform: scale(1);
	}
	60% {
		transform: scale(1.03);
	}
	80% {
		transform: none;
	}
}
.modal {
	align-items: center;
	background-color: rgba(0, 0, 0, .7);
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	inset: 0;
	transition: opacity .25s cubic-bezier(.25,.8,.25,1);
	z-index: 1000;
	display: flex;
	&.bounce {
		animation-name: modalAlert;
  		animation-duration: .4s;
	}
	&.show {
		opacity: 1;
		pointer-events: all;
	}
	&.blur {
		backdrop-filter: blur(2px);
	}
	&.no-backdrop {
		background-color: transparent;
		backdrop-filter: none;
		min-width: 300px;
	}
	&.no-backdrop.show {
		pointer-events: none;
		.modal-content {
			pointer-events: all;
		}
	}
}

.modal-content {
	position: relative;
	box-sizing: border-box;
	display: block;
	overflow: hidden;
	transform: scale(.6);
	transition: transform .3s cubic-bezier(.25,.8,.25,1);
	width: 90%;
	.modal.show & {
		transform: none;
	}
}