@import "@styles/vars.less";

.app_modal_wrapper {
	box-sizing: border-box;

	position: fixed;
	top: 0;
	left: 0;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	transition: all 150ms ease-in-out;

	font-size: 0.9rem;

	#mask_trigger {
		position: fixed;

		z-index: 450;

		top: 0;
		left: 0;

		width: 100vw;
		height: 100vh;
	}

	&.framed {
		.app_modal_content {
			display: flex;
			flex-direction: column;

			padding: 20px;

			background-color: var(--background-color-accent);

			border: 3px solid var(--border-color);

			border-radius: 12px;
		}
	}

	&.active {
		background-color: @modal_background_color;

		backdrop-filter: blur(@modal_background_blur);
		-webkit-backdrop-filter: blur(@modal_background_blur);

		.app_modal_content {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.app_modal_content {
		position: relative;

		z-index: 500;

		box-sizing: border-box;

		display: flex;
		flex-direction: column;

		align-items: center;
		justify-content: center;

		opacity: 0;
		transform: translateY(100px);

		height: fit-content;
		width: 40vw;

		max-width: 600px;

		transition: all 150ms ease-in-out;

		.app_modal_close {
			position: sticky;

			align-self: flex-end;

			top: 0;
			right: 0;

			font-size: 1.5rem;

			cursor: pointer;

			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);

			padding: 5px;

			border-radius: 12px;

			svg {
				margin: 0;
				color: var(--text-color);
			}
		}

		// fixments
		.postCreator {
			box-shadow: @card-shadow;
			-webkit-box-shadow: @card-shadow;
			-moz-box-shadow: @card-shadow;
		}
	}
}

.app-modal_confirm {
	display: flex;
	flex-direction: column;

	gap: 15px;

	width: 100%;

	.app-modal_confirm_content {
		display: flex;
		flex-direction: column;

		gap: 2px;
	}

	.app-modal_confirm_actions {
		display: flex;
		flex-direction: row;

		gap: 10px;
	}
}
