@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

body {
    @apply h-full bg-gray-50 dark:bg-slate-800 flex flex-col text-gray-500 dark:text-slate-600
}

h1 {
    @apply text-2xl font-bold mb-6 mt-6 text-blue-900 dark:text-slate-400
}

h2 {
    @apply text-xl pt-1 pb-2 text-blue-900 dark:text-slate-400
}

label {
    @apply block text-blue-900 dark:text-slate-400
}

input[type=text],
input[type=password] {
    @apply block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm px-2
    text-slate-600 dark:text-slate-400 dark:bg-slate-900 dark:ring-slate-600
}

textarea {
    @apply block w-full rounded-md border-0 py-1.5 px-2 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm
    text-slate-600 dark:text-slate-400 dark:bg-slate-900 dark:ring-slate-600
}

.btn-icon {
    @apply text-sm whitespace-nowrap flex items-center text-slate-500
}

.btn-outline {
    @apply text-sm text-blue-600 dark:text-slate-400 border border-blue-600 dark:border-slate-400 px-4 py-2 rounded
    hover:bg-blue-100 dark:hover:bg-slate-900
}

p {
    @apply py-1 mt-1
}

pre.box {
    @apply border rounded border-slate-400 dark:border-slate-700
    bg-slate-200 dark:bg-slate-900;

    overflow: auto;
    max-width: 100%;
}

.notification {
    @apply text-slate-200 fixed bottom-4 right-4 px-6 py-4 rounded-md shadow-lg;
}

.notification.error {
    @apply bg-red-700;
}

.notification.success {
    @apply bg-green-700;
}
