@import "/UI/Theme.scss";

// Shared styles for fullscreen modal popups.
// Add class="popup" to the <root> of any overlay popup component.

.popup
{
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	background-color: #000a;
	backdrop-filter: blur( 10px );
	z-index: 10000;
	justify-content: center;
	align-items: center;
	pointer-events: all;
	font-family: $body-font;
	opacity: 1;
	transition: all 0.2s ease;

	&:intro
	{
		transform: scale( 1.2 );
		opacity: 0;
	}

	&:outro
	{
		pointer-events: none;
		opacity: 0;
	}

	.inner
	{
		padding: 8px;
		flex-direction: column;
		gap: 16px;

		.popup-header
		{
			flex-direction: row;
			flex-shrink: 0;
			align-items: center;
			gap: 0.5rem;
			margin-bottom: 0.5rem;

			h2
			{
				font-family: $title-font;
				color: $color-accent;
				font-size: 3rem;
				font-weight: 700;
				height: 3rem;
			}
		}

		h3
		{
			color: $color-text;
			font-size: 1.25rem;
			font-weight: 500;
		}
	}
}

// Fade the backdrop independently while the prompt window moves into place.
.popup.prompt-popup
{
	transform: none;
	transition: opacity 0.2s ease-out;

	> .popup-window
	{
		opacity: 1;
		transform: translateY( 0px ) scale( 1 );
		transform-origin: 50% 50%;
		transition: transform 0.2s ease-out, opacity 0.2s ease-out;
	}

	&:intro > .popup-window
	{
		opacity: 0;
		transform: translateY( 14px ) scale( 0.96 );
	}

	&:outro
	{
		transition: opacity 0.16s ease-in;

		> .popup-window
		{
			opacity: 0;
			transform: translateY( -8px ) scale( 0.98 );
			transition: transform 0.16s ease-in, opacity 0.16s ease-in;
		}
	}
}

// Compact prompt windows share the spawn menu's surfaces and controls.
.popup > .inner.popup-window
{
	width: 480px;
	max-width: 90vw;
	max-height: 90vh;
	padding: 0;
	gap: 0;
	color: $menu-text;
	background-color: $menu-panel-bg;
	backdrop-filter: blur( 12px );
	border: 1px solid rgba( white, 0.07 );
	border-radius: 10px;
	box-shadow: 5px 5px 30px #000e;
	overflow: hidden;

	.popup-header
	{
		padding: 14px 16px;
		margin: 0;
		gap: 12px;
		background-color: rgba( black, 0.2 );
		border-bottom: 1px solid rgba( white, 0.07 );

		h2
		{
			flex-grow: 1;
			flex-shrink: 1;
			height: auto;
			font-size: 18px;
			font-weight: 600;
			color: $menu-text-strong;
		}
	}

	.popup-close
	{
		width: 28px;
		height: 28px;
		padding: 0;
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		border-radius: 6px;
		color: $menu-text;
		cursor: pointer;

		.icon { font-size: 20px; }

		&:hover
		{
			color: white;
			background-color: rgba( white, 0.08 );
			sound-in: ui.hover;
		}
	}

	.popup-body
	{
		padding: 20px;
		gap: 16px;
		flex-direction: column;
		flex-shrink: 1;
		overflow-y: scroll;

		h3
		{
			font-size: 14px;
			font-weight: 400;
			color: $menu-text;
			flex-shrink: 0;
		}

		.menu-input
		{
			width: 100%;
			min-height: 40px;
			padding: 10px 12px;
			font-size: 14px;
			flex-shrink: 0;
			border: 1px solid rgba( white, 0.1 );

			&:focus { border-color: $menu-accent; }
		}
	}

	.popup-footer
	{
		padding: 14px 20px;
		gap: 8px;
		flex-shrink: 0;
		justify-content: flex-end;
		background-color: rgba( black, 0.15 );
		border-top: 1px solid rgba( white, 0.07 );

		.menu-action
		{
			min-height: 36px;
			padding: 8px 14px;
			border-radius: 6px;
		}

		.popup-confirm
		{
			background-color: rgba( $menu-accent, 0.24 );

			&:hover { background-color: rgba( $menu-accent, 0.4 ); }
		}
	}
}