@import "../../styles/global.scss";
@import "../../styles/variables.scss";

.root {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	.modal-overlay {
		background: rgba(29, 33, 41, 0.56);
		backdrop-filter: blur(5px);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}
	.modal-container {
		height: 100%;
		outline: 0;
		overflow-x: hidden;
		overflow-y: auto;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		.modal {
			display: flex;
			flex-direction: column;
			text-align: left;
			height: fit-content;
			background: #ffffff;
			position: relative;
			overflow-y: auto;
			border-radius: $border-radius-radius-4;
			&-small {
				width: 400px;
			}
			&-medium {
				width: 600px;
			}
			&-large {
				width: 800px;
			}
			.modal-header {
				display: flex;
				width: 100%;
				position: relative;
				.modal-title {
					font-weight: 600;
					font-size: $size-core-heading;
					line-height: 24px;
					margin: 16px 24px;
					color: $color-font-ink;
				}
				.close-icon {
					position: absolute;
					top: 15px;
					right: 15px;
					cursor: pointer;
					display: flex;
					i {
						font-size: 8px;
					}
				}
			}
			.modal-body {
				padding: 8px 24px;
				max-height: 80vh;
				overflow-y: scroll;
				position: relative;
			}
			.modal-footer {
				display: flex;
				width: 100%;
				.button-container {
					margin: 16px 0;
					margin-left: auto;
					display: flex;
					margin-right: 24px;
					.ai-button {
						margin-left: 8px;
					}
				}
			}
		}
	}
}

// modal animations
.modal-animation-in {
	animation: modal-animation-in 300ms;
}
.modal-animation-out {
	animation: modal-animation-out 300ms;
}
.overlay-animation-in {
	animation: overlay-animation-in 300ms;
}
.overlay-animation-out {
	animation: overlay-animation-out 300ms;
}

@keyframes overlay-animation-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes overlay-animation-out {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes modal-animation-in {
	0% {
		transform: scale(0.96);
		opacity: 0;
	}
	100% {
		transform: scale(100%);
		opacity: 1;
	}
}

@keyframes modal-animation-out {
	0% {
		transform: scale(100%);
		opacity: 1;
	}
	100% {
		transform: scale(0.96);
		opacity: 0;
	}
}