@import "/UI/Core/Styles/Theme.scss";

TipPopup {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	z-index: 170;

	root {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;
		transition: opacity 0.22s;

		&.hidden {
			opacity: 0;
			pointer-events: none;
		}

		&.visible {
			opacity: 1;
		}
	}

	.tip-popup-box {
		position: absolute;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 12px 18px;
		gap: 4px;
		border-radius: 4px;
		background-color: $widget-color-dark;
		backdrop-filter: $widget-backdrop-filter;
		border: 1px solid rgba( 255, 255, 255, 0.04 );
		box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.4 );
		max-width: 520px;
	}

	.tip-popup-title {
		font-size: 14px;
		font-weight: 900;
		letter-spacing: 1px;
		text-transform: uppercase;
		opacity: 0.9;
	}

	.tip-popup-body {
		font-size: 15px;
		font-weight: 700;
		white-space: normal;
		text-align: center;
	}

	.tip-popup-body-row {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 4px 6px;
		max-width: 780px;
		white-space: nowrap;
	}

	.kbd {
		font-family: monospace;
		font-weight: 900;
		font-size: 14px;
		letter-spacing: 0.5px;
		color: rgba( 255, 255, 255, 0.98 );
		padding: 2px 9px;
		border: 1px solid rgba( 255, 255, 255, 0.45 );
		border-radius: 4px;
		background-color: rgba( 255, 255, 255, 0.10 );
		box-shadow: 0 1px 0 rgba( 0, 0, 0, 0.4 );
	}

	&.tip-compact .tip-popup-box {
		padding: 6px 10px;
		gap: 2px;
		max-width: 320px;
	}

	&.tip-compact .tip-popup-title {
		font-size: 11px;
	}

	&.tip-compact .tip-popup-body {
		font-size: 12px;
		font-weight: 700;
	}

	// --- Onboarding-only size bumps (only applied when UseKeyCaps is set) ----
	// The role onboarding popup is wider so its body fits on one line, and the
	// compact follow-up reads at a more comfortable size. Other tooltips keep
	// the original tighter defaults.
	&.tip-keycaps .tip-popup-box {
		padding: 12px 22px;
		max-width: 820px;
	}

	&.tip-keycaps.tip-compact .tip-popup-box {
		padding: 9px 14px;
		gap: 3px;
		max-width: 820px;
	}

	&.tip-keycaps.tip-compact .tip-popup-title {
		font-size: 13px;
	}

	&.tip-keycaps.tip-compact .tip-popup-body {
		font-size: 14px;
		font-weight: 700;
	}

	&.tip-keycaps.tip-compact .tip-popup-body-row {
		max-width: 600px;
		gap: 4px;
	}

	&.tip-keycaps.tip-compact .kbd {
		font-size: 12px;
		padding: 2px 8px;
	}

	// Anchors
	&.tip-anchor-top .tip-popup-box {
		top: 95px;
		left: 50%;
		transform: translateX( -50% );
	}

	&.tip-anchor-center .tip-popup-box {
		top: 50%;
		left: 50%;
		transform: translate( -50%, -50% );
	}

	&.tip-anchor-above-crosshair .tip-popup-box {
		top: 42%;
		left: 50%;
		transform: translateX( -50% );
	}

	&.tip-anchor-below-crosshair .tip-popup-box {
		top: 58%;
		left: 50%;
		transform: translateX( -50% );
	}

	&.tip-anchor-bottom-right .tip-popup-box {
		bottom: 120px;
		right: 32px;
	}

	&.tip-anchor-bottom-left .tip-popup-box {
		bottom: 175px;
		left: 32px;
	}

	&.tip-anchor-mouse .tip-popup-box {
		// Position is driven from Tick() via Mouse.Position; no transform so the
		// top-left of the box matches the cursor offset exactly.
		transform: none;
	}

	// Themes - subtle tinted border so role-popups still feel themed without a bright glow.
	&.tip-theme-traitor .tip-popup-box {
		border-color: rgba( 220, 70, 70, 0.15 );
	}

	&.tip-theme-detective .tip-popup-box {
		border-color: rgba( 90, 140, 230, 0.15 );
	}

	// Plain (non-keycap) traitor tooltips render their body in dark red so role-flavoured
	// hints (e.g. "press X to hang body") read as Traitor at a glance.
	&.tip-theme-traitor:not(.tip-keycaps) .tip-popup-body {
		color: $traitor-red;
	}

	// Themed key caps: full-strength role color so the keys themselves are the
	// strongest visual difference between Traitor and Detective popups.
	&.tip-theme-traitor .kbd {
		background-color: rgba( 220, 70, 70, 0.30 );
		border: 1px solid rgba( 220, 70, 70, 0.85 );
	}

	&.tip-theme-detective .kbd {
		background-color: rgba( 90, 140, 230, 0.30 );
		border: 1px solid rgba( 90, 140, 230, 0.85 );
	}
}