@import "tailwindcss";
@import "../../static/fonts/inter/inter";
@import "../../static/fonts/ibm-plex-mono/ibm-plex-mono";

@plugin "@iconify/tailwind4" {
	/* biome-ignore lint/correctness/noUnknownProperty: this works dude idk how to set it properly */
	prefixes: gravity-ui;
}

:root {
	--font-sans: "InterVariable", ui-sans-serif, sans-serif;
	--mono-font: "IBM Plex Mono", ui-monospace, monospace;
}

@supports (font-variation-settings: normal) {
	html {
		font-feature-settings:
			"kern" 1,
			"liga" 1,
			"cv05" 1,
			"tnum" 1;
	}
}

.btn {
	@apply relative z-10 inline-flex min-h-[30px] items-center justify-center bg-transparent pl-2 pr-2 text-sm text-gray-900 outline-none;
}

.btn::before {
	@apply absolute inset-0 -z-10 rounded border border-gray-200 bg-white duration-150 transition-all ease-in;
	--tw-shadow:
		inset 0 -2px 0 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.04);
	--tw-shadow-colored:
		inset 0 -2px 0 0 var(--tw-shadow-color), 0 1px 0 0 var(--tw-shadow-color);
	box-shadow:
		var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
		var(--tw-shadow);
	content: "";
}

.btn:hover::before {
	@apply bg-gray-50;
	--tw-shadow:
		inset 0 -2px 0 0 rgba(0, 0, 0, 0.15), 0 2px 1px 0 rgba(0, 0, 0, 0.06);
	--tw-shadow-colored:
		inset 0 -2px 0 0 var(--tw-shadow-color), 0 2px 1px 0 var(--tw-shadow-color);
	box-shadow:
		var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
		var(--tw-shadow);
	content: "";
}

.btn:focus {
	@apply outline-2 outline-offset-2;
}

.btn:focus-visible::before {
	@apply outline-solid outline-2 outline-gray-400;
}

.btn:active::before {
	--tw-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.1);
	--tw-shadow-colored: inset 0 2px 2px 0 var(--tw-shadow-color);
	box-shadow:
		var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
		var(--tw-shadow);
	content: "";
}

.btn:disabled {
	@apply cursor-not-allowed opacity-50;
}

@media (prefers-color-scheme: dark) {
	.btn {
		@apply text-gray-100;
	}

	.btn::before {
		@apply border-gray-700 bg-gray-800;
	}

	.btn:hover::before {
		@apply bg-gray-700;
	}
}