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

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

@layer components {
	.btn {
		@apply cursor-pointer select-none inline-flex justify-center items-center whitespace-nowrap border focus:outline-none focus:ring;
	}
}

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

	.code-block {
		@apply relative bg-gray-100 dark:bg-gray-950 rounded-lg my-4;
	}

	.code-block > pre {
		@apply overflow-auto px-5 py-3.5 text-gray-500 dark:text-gray-400;
	}
}