@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--background: #ffffff;
	--foreground: #171717;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
} */

body {
	color: var(--foreground);
	background: var(--background);
}

/* Increase specificity and use !important where necessary */
.mapboxgl-popup .mapboxgl-popup-content {
	@apply rounded-xl p-4 px-5 drop-shadow-lg border border-neutral-300 max-w-xs !important;
}

/* Hide the popup tip */
.mapboxgl-popup .mapboxgl-popup-tip {
	display: none !important;
}

/* Child elements */
.mapboxgl-popup-content h3 {
	@apply text-sm font-medium text-neutral-800 !important;
}

.mapboxgl-popup-content p {
	@apply text-xs text-neutral-600  !important;
}

.mapboxgl-popup-content p + p {
	@apply text-neutral-500 !important;
}