@use '../../scss/animations';

.modal {
	.overlay {
		height: 100vh;
		width: 100vw;
		opacity: 0.4;
		background-color: var(--black-color);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.wrapper {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 100;

		.content {
			background-color: #29292e;
			width: min(42rem, 50%);
			border-radius: 15px;
			padding: 0 2.5rem 2.5rem;
			animation: bottom-fade-in 0.2s ease-in-out;
			overflow-y: hidden;
			overflow-x: hidden;

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 1.5rem;
				width: 100%;
				user-select: none;

				svg {
					font-size: 1.7rem;
					cursor: pointer;
					transition: 0.3s;

					&:hover {
						transform: rotate(90deg);
					}
				}
			}

			.footer {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				gap: 1rem;
				margin-top: 2rem;
			}
		}
	}
}
