@import 'tailwindcss';
@import '@atmo-dev/kit/theme.css';

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';
@source '../node_modules/@atmo-dev/events-ui/dist';
@source '../../../packages/ui/src';

/* Match the kit: follow the OS unless an ancestor sets .light or .dark. */
@custom-variant dark {
	&:is(.dark, .dark *) {
		@slot;
	}
	@media (prefers-color-scheme: dark) {
		&:not(.light, .light *) {
			@slot;
		}
	}
}

@layer base {
	body {
		margin: 0;
	}
	button,
	a,
	input,
	textarea,
	select {
		-webkit-tap-highlight-color: transparent;
	}
	:focus-visible {
		outline: 2px solid var(--ui-focus);
		outline-offset: 3px;
	}
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

.maplibregl-ctrl-bottom-left > .maplibregl-ctrl.maplibregl-ctrl-attrib {
	font: 7px / 10px monospace;
	border-top-right-radius: 0.5rem;
	border: none;
	box-shadow: none;
	min-height: 1rem;
	background-color: rgba(0, 0, 0, 0.45);
}

.maplibregl-ctrl-attrib-button {
	display: none;
}

.maplibregl-ctrl.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner {
	color: rgba(255, 255, 255, 0.85);
	line-height: 1rem;
}

.maplibregl-ctrl.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner a {
	color: inherit;
}