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

@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@custom-variant dark (&:where(.dark, .dark *));

[x-cloak] {
    display: none;
}

@layer components {
    .process-button {
        @apply inline-flex items-center justify-center gap-1 rounded-lg border border-stone-200 bg-white px-3 py-2 text-xs font-semibold text-stone-700 hover:bg-stone-100 disabled:cursor-not-allowed disabled:opacity-40;
    }

    .process-primary {
        @apply border-sky-700 bg-sky-600 text-white hover:bg-sky-700;
    }

    .process-label {
        @apply grid gap-1 text-xs font-medium text-stone-600;
    }

    .process-input {
        @apply w-full min-w-0 rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm text-stone-800 focus:border-sky-500 focus:ring-sky-500;
    }
}