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

[x-cloak] {
    display: none;
}

@layer components {

    .btn {
        @apply rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset transition-all uppercase;
    }
    .btn-full {
        @apply inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset transition-all uppercase;
    }

    /*SIZES*/
    .btn-sm {
        @apply px-2.5 py-1.5 text-xs;
    }
    .btn-lg {
        @apply px-4 py-3 text-lg;
    }

    /*COLORS*/
    .btn-stone {
        @apply bg-stone-200 text-stone-900 ring-stone-300 hover:bg-stone-300;
    }
    .btn-rose {
        @apply bg-rose-200 text-rose-900 ring-rose-300 hover:bg-rose-300;
    }
}