@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-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;
	}

	// 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-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 );
	}
}