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

@layer components {
	[x-cloak] { display: none !important; }
	
	.button {
		@apply py-3 px-6 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-light focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors;
	}
	.textinput {
		@apply bg-transparent shadow-sm sm:text-sm border border-gray-300 rounded-md p-2 min-h-10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary;
	}
	.select {
		@apply appearance-none bg-transparent shadow-sm sm:text-sm border border-gray-300 rounded-md p-2 min-h-10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary pr-10;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: right 0.5rem center;
		background-size: 1.5em 1.5em;
	}
	.textcontent h2 { @apply mb-2 mt-10 text-2xl font-bold; }
	.textcontent p { @apply my-2; }
}