@import "tailwindcss";

/* Custom styles */
.rt-badge {
    /* @apply inline-flex; */
    @apply inline-flex;
    @apply mx-1;
    @apply px-2 py-1;
    @apply rounded-md;
    @apply bg-gray-200;

    @apply text-slate-950;
    @apply text-sm;
}

.invert-text {
    @apply text-white;
}

/* Preferences */
/* .preferences {
} */

/* Buttons */
.btn {
    @apply max-h-none;
    @apply flex flex-row;
    @apply px-4 py-2 rounded-sm;
    @apply text-sm;

    &.btn-clear {
        @apply text-blue-600 dark:text-blue-400;
        @apply hover:text-blue-500 dark:hover:text-blue-500;
    }

    &.btn-primary {
        @apply !text-slate-50;
        @apply bg-blue-500 hover:bg-blue-400;
        @apply dark:bg-blue-600 dark:hover:bg-blue-500;
        @apply shadow-sm;
    }

    &.btn-default {
        @apply !text-black;
        @apply bg-gray-200 hover:bg-gray-300;
        @apply shadow-sm;
    }
}

/* Form */
.input {
    @apply p-2 m-0;
    @apply border border-slate-200 rounded-sm;
    @apply text-sm;
    @apply text-slate-950 bg-slate-100;
    @apply outline-none;
    @apply focus:border-blue-400;
}

.select {
    @apply appearance-none bg-transparent z-10;
}