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

h2 {
    @apply font-bold mb-2 text-2xl;
}

h3 {
    @apply font-bold mb-2 text-xl;
}

input[type="password"],
input[type="text"] {
    @apply bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 h-8 rounded-md;
}

textarea {
    @apply bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 h-32 rounded-md;
}

.btn-area-1 {
    @apply grid grid-cols-1 gap-x-4 gap-y-1 mt-4;
}

.btn-area {
    @apply grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1;
}

.btn-area-3 {
    @apply grid grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-1 mt-4;
}

.btn {
    @apply bg-slate-200 dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-900 border border-slate-200 dark:border-slate-800 cursor-pointer my-2 px-3 py-2 rounded-md w-full;
}

.action-btn {
    @apply bg-slate-800 dark:bg-slate-200 hover:bg-slate-700 dark:hover:bg-slate-300 cursor-pointer my-2 px-3 py-2 rounded-md text-slate-50 dark:text-slate-950 w-full;
}

.EasyMDEContainer .CodeMirror {
    @apply bg-slate-50 dark:bg-slate-950 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-slate-100;
}

.EasyMDEContainer .cm-s-easymde .CodeMirror-cursor {
    @apply border-slate-900 dark:border-slate-100;
}

.EasyMDEContainer .editor-toolbar > * {
    @apply text-slate-900 dark:text-slate-100;
}

.EasyMDEContainer .editor-toolbar > .active, .editor-toolbar > button:hover, .editor-preview pre, .cm-s-easymde .cm-comment {
    @apply bg-slate-100 dark:bg-slate-900;
}

.EasyMDEContainer .CodeMirror-fullscreen {
    @apply bg-slate-50 dark:bg-slate-950;
}

.editor-toolbar {
    @apply border border-slate-200 dark:border-slate-800;
}

.editor-toolbar.fullscreen {
    @apply bg-slate-50 dark:bg-slate-950;
}

.editor-preview {
    @apply bg-slate-50 dark:bg-slate-950;
}