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

@layer base {
	:root {
		--background: 0 0% 3.9%;
		--foreground: 0 0% 98%;
		--card: 0 0% 3.9%;
		--card-foreground: 0 0% 98%;
		--popover: 0 0% 3.9%;
		--popover-foreground: 0 0% 98%;
		--primary: 0 0% 98%;
		--primary-foreground: 0 0% 9%;
		--secondary: 0 0% 14.9%;
		--secondary-foreground: 0 0% 98%;
		--muted: 0 0% 14.9%;
		--muted-foreground: 0 0% 63.9%;
		--accent: 0 0% 14.9%;
		--accent-foreground: 0 0% 98%;
		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 0 0% 98%;
		--border: 0 0% 14.9%;
		--input: 0 0% 14.9%;
		--ring: 0 0% 83.1%;
		--chart-1: 220 70% 50%;
		--chart-2: 160 60% 45%;
		--chart-3: 30 80% 55%;
		--chart-4: 280 65% 60%;
		--chart-5: 340 75% 55%;
	}
}
@layer base {
	* {
		@apply border-border;
	}
	body {
		@apply bg-background text-foreground;
	}
}
@layer base {
	:root {
		--chart-1: 220 70% 50%;
		--chart-2: 160 60% 45%;
		--chart-3: 30 80% 55%;
		--chart-4: 280 65% 60%;
		--chart-5: 340 75% 55%;
	}
}

body {
	background-color: var(--sl-color-bg) !important;
	color: var(--sl-color-text) !important;
}

path.recharts-rectangle.recharts-tooltip-cursor {
	fill: var(--sl-color-gray-5) !important;
}

.recharts-tooltip {
	border-radius: 4px;
	border: 1px solid var(--sl-color-gray-5);
	background-color: var(--sl-color-gray-6);
}

.recharts-tooltip > .grid > div > div > div {
	position: relative;
	bottom: 1px;
}

.recharts-tooltip > .grid > div > div:last-of-type {
	gap: 0.5rem;
	align-items: center;
}

.recharts-layer.recharts-bar-rectangle {
	display: block;
	margin-bottom: 0.25rem !important;
}

.recharts-rectangle.recharts-tooltip-cursor {
	border-radius: 8px;
}

.recharts-layer > g:has(path[name='hot']) {
	--color-duration: #94e2d5;
}

.recharts-layer > g:has(path[name='cold']) {
	--color-duration: #74c7ec;
}

.recharts-layer > g:has(path[name='standard']) {
	--color-duration: #b4befe;
}
