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

@font-face {
	font-weight: 100 900;
	font-style: normal;
	font-family: Inter;
	font-display: block;
	src: url('./fonts/Inter-roman-latin.var.woff2');
}

/* Generated by AstroFont, but injected to avoid View Transitions weirdness with <style> tags */
@font-face {
	font-family: '_font_fallback_732902278794';
	size-adjust: 107.64%;
	src: local('Arial');
	ascent-override: 90%;
	descent-override: 22.43%;
	line-gap-override: 0%;
}

@layer base {
	number-flow,
	number-flow-react,
	number-flow-vue,
	number-flow-svelte {
		@apply font-mac-ui;
	}
}

@layer components {
	.container {
		@apply ~px-6/10 mx-auto w-full;
	}

	.link-underline {
		@apply ease-out-quad hover:text-primary underline decoration-zinc-300 decoration-[1px] underline-offset-[0.3em] transition-[color,text-decoration-color] hover:decoration-current dark:decoration-zinc-600;
	}

	.btn {
		@apply inline-flex h-11 items-center gap-2 whitespace-nowrap rounded-full px-5 text-sm font-medium transition duration-[.16s] ease-[cubic-bezier(.4,0,.2,1)] active:scale-[98%] active:brightness-[98%] active:duration-[25ms] dark:hover:brightness-125;
	}

	.btn-primary {
		@apply bg-zinc-900 text-zinc-50 hover:brightness-125;
	}

	.btn-callout {
		@apply btn-primary dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white dark:hover:brightness-100;
	}

	.btn-secondary {
		@apply hover:bg-zinc-100 dark:hover:bg-zinc-900;
	}

	/* We can't define this in the tailwind config because .Demo has .not-prose on it: */
	.prose .Demo {
		@apply my-5;
	}
}

@layer utilities {
	.text-primary {
		@apply text-zinc-950 dark:text-zinc-50;
	}

	.caret-primary {
		@apply caret-zinc-950 dark:caret-zinc-50;
	}

	.text-muted {
		@apply text-zinc-500 dark:text-zinc-400;
	}

	.bg-muted {
		@apply bg-zinc-500 dark:bg-zinc-400;
	}

	.bg-faint {
		@apply bg-zinc-150 dark:bg-zinc-700;
	}

	.bg-mask-white {
		background-image: linear-gradient(to top, theme(colors.white), ease-out, transparent);
	}

	.bg-mask-zinc-950 {
		background-image: linear-gradient(to top, theme(colors.zinc.950), ease-out, transparent);
	}

	.scrollbar-none {
		-ms-overflow-style: none; /* IE */
		scrollbar-width: none; /* Firefox */
		&::-webkit-scrollbar {
			display: none;
		}
	}

	.spin-hide {
		appearance: textfield;
		&::-webkit-inner-spin-button {
			appearance: none;
			margin: 0;
		}
		&::-webkit-outer-spin-button {
			appearance: none;
			margin: 0;
		}
	}

	/* we need a fallback value for this: */
	.mt-external-link-icon {
		margin-top: 0.4em;
		margin-top: calc((1lh - 1em) / 2 + 0.0625em);
	}
}
