@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
	html {
		@apply font-inter selection:bg-primary selection:text-accent scroll-smooth;
	}
	p {
		@apply text-base text-accent1;
	}

}

@layer components {
	/* Card */
	.card {
		@apply w-full rounded-std bg-white shadow-std;
	}
	.card-header {
		@apply p-4 lg:p-8 pb-0 w-full;
	}
	.card-body {
		@apply p-4 lg:p-8 w-full;
	}
	.card-footer {
		@apply p-6 lg:p-8 w-full;
	}
	ul li.active {
		@apply text-accent;
	}
	/* Form */
	.form-control {
		@apply bg-white font-normal w-full h-auto flex items-center p-3 text-sm rounded-std-1/2 border border-accent focus:outline-none;
	}
	label {
		@apply text-base text-primary font-semibold block mb-2;
	}
	.form-control.invalid-input {
		@apply border-danger;
	}
	.form-control.invalid-input:focus {
		@apply border-danger;
	}
	
}