@import "./highlight-js.css";

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

@layer components {
	.btn {
		@apply inline-flex flex-shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap outline-none transition-all focus:ring disabled:cursor-default;
	}

	.active-model {
		@apply border-blue-500 bg-blue-500/5 hover:bg-blue-500/10;
	}

	.file-hoverable {
		@apply hover:bg-gray-500/10;
	}

	.base-tool {
		@apply flex h-[1.6rem] items-center gap-[.2rem] whitespace-nowrap border border-transparent text-xs outline-none transition-all focus:outline-none active:outline-none dark:hover:text-gray-300 sm:hover:text-purple-600;
	}

	.active-tool {
		@apply rounded-full !border-purple-200 bg-purple-100 pl-1 pr-2 text-purple-600 hover:text-purple-600 dark:!border-purple-700 dark:bg-purple-600/40 dark:text-purple-200;
	}
}

@layer utilities {
	.scrollbar-custom {
		@apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-black/10 scrollbar-thumb-rounded-full scrollbar-w-1 hover:scrollbar-thumb-black/20 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20;
	}
}

.katex-display {
	overflow: auto hidden;
}