CoastalCommitsPastes/client/app/components/password-modal/modal.module.css

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	background: var(--gray-alpha);
	z-index: 1;
}

.content {
	background-color: var(--bg);
	border-radius: var(--radius);
	box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
		hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90vw;
	max-width: 450px;
	max-height: 85vh;
	padding: 25px;
	animation: contentShow 100ms cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 2;
	border: 1px solid var(--border);
}

.fieldset {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin-bottom: var(--gap-half);
}

.content:focus {
	outline: none;
}

.close {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

@keyframes overlayShow {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes contentShow {
	from {
		opacity: 0;
		transform: translate(-50%, -48%) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}