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

@layer base {
	:root {
		--background: 224 71% 4%;
		--foreground: 213 31% 91%;

		--background-transparent: var(--background) / 0.8;

		--muted: 223 47% 11%;
		--muted-foreground: 215.4 16.3% 56.9%;

		--accent: 216 34% 17%;
		--accent-foreground: 210 40% 98%;

		--popover: 224 71% 4%;
		--popover-foreground: 215 20.2% 65.1%;

		--border: 216 34% 17%;
		--input: 216 34% 17%;

		--card: 224 71% 4%;
		--card-foreground: 213 31% 91%;

		--primary: 210 40% 98%;
		--primary-foreground: 222.2 47.4% 1.2%;

		--secondary: 222.2 47.4% 11.2%;
		--secondary-foreground: 210 40% 98%;

		--destructive: 0 63% 31%;
		--destructive-foreground: 210 40% 98%;

		--ring: 216 34% 17%;

		--radius: 0.5rem;
	}

	.blueprint {
		background-image: linear-gradient(rgba(100, 100, 100, 0.1) 1px, transparent 1px),
			linear-gradient(90deg, rgba(100, 100, 100, 0.1) 1px, transparent 1px),
			linear-gradient(rgba(100, 100, 100, 0.1) 1px, transparent 1px),
			linear-gradient(90deg, rgba(100, 100, 100, 0.1) 1px, transparent 1px);
		background-size:
			20px 20px,
			20px 20px,
			20px 20px,
			20px 20px;
		background-position: 50% 50%;
	}
}

@layer base {
	* {
		@apply border-border;
	}

	body {
		@apply bg-background text-foreground;
		font-feature-settings: "rlig" 1, "calt" 1;
	}
}

@layer components {
	.link {
		@apply text-blue-400 hover:text-blue-500 transition-colors duration-200 hover:underline cursor-pointer;
	}
}

pre {
	background: transparent !important;
	white-space : pre-wrap !important;
}

code {
	counter-reset: step;
	counter-increment: step 0;
}

code .line::before {
	content: counter(step);
	counter-increment: step;
	width: 1rem;
	margin-right: 1.5rem;
	display: inline-block;
	text-align: right;
	color: white;
}

code .line {
	padding: 0 1rem;
}

section.mdx-code > pre.shiki > code {
	white-space: pre;
}

.global-dropzone-border {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23276ae9FF' stroke-width='3' stroke-dasharray='6%2c14' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
}

.global-dropzone-backdrop {
	background: linear-gradient(0deg, rgb(2 0 36 / 85%) 45%, rgb(9 9 121 / 15%) 100%)
}

[data-rehype-pretty-code-figure] code {
	@apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0 text-sm text-black px-4;
	counter-reset: line;
	box-decoration-break: clone;
}
[data-rehype-pretty-code-figure] .line {
	@apply px-4 py-1;
}
[data-rehype-pretty-code-figure] [data-line-numbers] > .line::before {
	counter-increment: line;
	content: counter(line);
	display: inline-block;
	width: 1rem;
	margin-right: 1rem;
	text-align: right;
	color: gray;
}
[data-rehype-pretty-code-figure] .line--highlighted {
	@apply bg-slate-300 bg-opacity-10;
}
[data-rehype-pretty-code-figure] .line-highlighted span {
	@apply relative;
}
[data-rehype-pretty-code-figure] .word--highlighted {
	@apply rounded-md bg-slate-300 bg-opacity-10 p-1;
}
[data-rehype-pretty-code-title] {
	@apply mt-4 py-2 px-4 text-sm font-medium;
}
[data-rehype-pretty-code-title] + pre {
	@apply mt-0;
}