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

@layer components {
	.bordered-field {
		@apply block w-full border-0 py-1 text-gray-900 placeholder:text-gray-400 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600;
	}
	.btn-primary {
		@apply inline-flex items-center gap-x-1.5 bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700;
	}
	.btn-secondary {
		@apply inline-flex items-center gap-x-1.5 px-3 py-1 text-gray-800 shadow-sm ring-1 ring-inset ring-gray-400 hover:bg-gray-50;
	}
	.checkbox-primary {
		@apply h-4 w-4 border-gray-300 text-emerald-600 shadow-sm focus:ring-emerald-600 -mt-0.5;
	}
	.page-heading {
		@apply text-xl sm:text-base font-medium text-gray-700 print:text-xl print:text-gray-900;
	}
}