@import "~scss/_mixins";

.popups {
	.popup { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 101; }
	.popup.show {
		.innerWrap { opacity: 1; transform: none; }
		.dimmer { opacity: 1; -webkit-app-region: no-drag; }
	}
	.popup.showDimmer {
		.dimmer { background: rgba(0,0,0,0.25); }
	}

	.popup * { user-select: none; }
	
	.popup {
		.innerWrap { 
			position: absolute; left: 0px; top: 50%; z-index: 1; background: var(--color-bg-primary); border-radius: 12px; box-shadow: 0px 2px 28px rgba(0, 0, 0, 0.2);
			opacity: 0; transform: scale(0.95,0.95); transition-duration: 0.15s; transition-property: transform, opacity; transition-timing-function: $easeInQuint;
			overflow-x: hidden; overflow-y: auto; overscroll-behavior: none;
		}

		.dimmer { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 0; transition: opacity 0.3s $easeInQuint; opacity: 0; }
		.dimmer {
			/* Dimmer with Graph styles for AI onboarding */
			&.withGraph {
				.graphOverlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: auto; z-index: 1; }

				.popupBlocker {
					position: absolute; top: calc(50% - 340px); left: calc(50% - 360px); width: 720px; height: 680px; pointer-events: auto; z-index: 2;
				}

				.onboardingGraphWorkerContainer { position: absolute; top: 0px; left: 0px; pointer-events: auto; opacity: 1.0; z-index: 0; }
				.onboardingGraphWorkerContainer {
					canvas { position: absolute; top: 0; left: 0; cursor: default; image-rendering: auto; backface-visibility: hidden; }
				}
			}
		}

		#loader { position: absolute; left: 0px; top: 0px; z-index: 20; width: 100%; height: 100%; border-radius: 12px; background: var(--color-bg-loader); }
	}
}

html.platformWindows {
	.popups {
		.popup {
			.innerWrap { overflow-y: overlay; }
		}
	}
}

@import "./about";
@import "./confirm";
@import "./export";
@import "./help";
@import "./invite";
@import "./membership";
@import "./migration";
@import "./objectManager";
@import "./page";
@import "./phrase";
@import "./pin";
@import "./preview";
@import "./relation";
@import "./search";
@import "./settings";
@import "./shortcut";
@import "./usecase";
@import "./share";
@import "./spaceCreate";
@import "./spaceJoinByLink";
@import "./logout";
@import "./onboarding";
@import "./apiCreate";
@import "./aiOnboarding";
@import "./introduceChats";
