@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import "tailwindcss";

@layer base {
    body {
        font-family: "Poppins", sans-serif !important;
        @apply text-sm text-black/80; /* smaller size + 80% opacity black text */
    }
}

@layer components {
    /*input[type="text"],*/
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"], textarea {
        @apply block  w-full rounded-sm border-0 p-2 text-slate-500 ring-1 ring-inset ring-slate-300 placeholder:text-slate-500 focus:ring-2 focus:ring-inset focus:ring-blue-300 text-sm bg-white text-gray-500 ;
    }
    label {
        @apply block text-sm font-medium leading-6 text-slate-900 first-letter:capitalize;
    }

    .round-btn {
        @apply w-8 h-8 overflow-auto rounded-full bg-slate-100 focus:outline-none focus:ring-1 focus:ring-slate-100 focus:ring-offset-2 focus:ring-offset-slate-800;
    }
    .btn-primary{
        @apply bg-blue-500 rounded-sm text-white text-xs px-5 py-2 mr-2
        /*@apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800*/
    }

    .btn-primary-sm{
        @apply inline-block bg-blue-500 rounded-sm text-white text-xs px-3 py-1 mr-2
    }


    .btn-warning{
        @apply bg-amber-500 rounded-sm text-white text-xs px-5 py-2 mr-2
        /*@apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800*/
    }

    .btn-danger{
        @apply bg-red-500 rounded-sm text-white text-xs px-5 py-2 mr-2
        /*@apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800*/
    }
}