/* "Show my location": the bottom-left map button (modules/userLocationControl.js) and the
   shared "you are here" dot (modules/userLocationMarker.js). Kept out of style.css, which is
   frozen for new features (docs/reference/ui-architecture.md). The button inherits the
   36px bottom-left control look from style.css. */

:root {
	--user-location-blue: #2b7de9;
}

:root[data-theme='dark'] {
	--user-location-blue: #5a9cf2;
}

.user-location-ctrl {
	position: relative;
}

.user-location-button {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--page-text-color);
	font-size: 16px;
	cursor: pointer;
}

.user-location-button[data-state='on'] {
	color: var(--user-location-blue);
}

.user-location-button[data-state='locating'] {
	color: var(--purple);
}

.user-location-button:focus-visible {
	outline: 2px solid var(--purple);
	outline-offset: -2px;
}

.user-location-spinner {
	animation: user-location-spin 0.9s linear infinite;
}

@keyframes user-location-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Short feedback beside the button: permission blocked, no fix, and so on. */
.user-location-message {
	position: absolute;
	left: calc(100% + 8px);
	bottom: 0;
	width: max-content;
	max-width: min(260px, calc(100vw - 150px));
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid var(--map-control-border);
	background: var(--map-control-bg);
	box-shadow: var(--shadow);
	backdrop-filter: blur(var(--glass-blur));
	color: var(--page-text-color);
	font-size: 13px;
	line-height: 1.35;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.2s ease,
		visibility 0.2s ease;
	pointer-events: none;
}

.user-location-message.is-visible {
	opacity: 1;
	visibility: visible;
}

/* The dot. Clicks pass through so aircraft and spots underneath stay tappable. */
.user-location-dot {
	position: relative;
	width: 18px;
	height: 18px;
	/* !important because Mapbox writes pointer-events: auto inline on every marker. */
	pointer-events: none !important;
}

.user-location-dot-core,
.user-location-dot-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-sizing: border-box;
}

.user-location-dot-core {
	background: var(--user-location-blue);
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.user-location-dot-pulse {
	background: var(--user-location-blue);
	opacity: 0.45;
	animation: user-location-pulse 2s ease-out infinite;
}

@keyframes user-location-pulse {
	from {
		transform: scale(1);
		opacity: 0.45;
	}
	to {
		transform: scale(2.6);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.user-location-dot-pulse {
		animation: none;
		opacity: 0;
	}

	.user-location-spinner {
		animation: none;
	}
}