@import './Button.css';
@import './TextField.css';
@import './theme.css';

.react-aria-ModalOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: var(--visual-viewport-height);
	background: rgba(0 0 0 / 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;

	&[data-entering] {
		animation: modal-fade 200ms;
	}

	&[data-exiting] {
		animation: modal-fade 150ms reverse ease-in;
	}
}

.react-aria-Modal {
	box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
	border-radius: 6px;
	background: var(--overlay-background);
	color: var(--text-color);
	border: 1px solid var(--gray-400);
	outline: none;
	max-width: 300px;

	&[data-entering] {
		animation: modal-zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.react-aria-TextField {
		margin-bottom: 8px;
	}
}

@keyframes modal-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes modal-zoom {
	from {
		transform: scale(0.8);
	}

	to {
		transform: scale(1);
	}
}

@keyframes mymodal-blur {
	from {
		background: rgba(45 0 0 / 0);
		backdrop-filter: blur(0);
	}

	to {
		background: rgba(45 0 0 / 0.3);
		backdrop-filter: blur(10px);
	}
}

@keyframes mymodal-slide {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}
