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

[x-cloak] {
    display: none;
}

main a:not(.mod-list-component):not(.tab) {
    @apply underline text-gray-800 hover:text-black dark:text-gray-200 dark:hover:text-white;
}

.badge-version {
    @apply bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-100;

    &.red {
        @apply bg-red-100 dark:bg-red-700 text-red-700 dark:text-red-100;
    }

    &.green {
        @apply bg-green-100 dark:bg-green-700 text-green-700 dark:text-green-100;
    }

    &.emerald {
        @apply bg-emerald-100 dark:bg-emerald-700 text-emerald-700 dark:text-emerald-100;
    }

    &.lime {
        @apply bg-lime-100 dark:bg-lime-700 text-lime-700 dark:text-lime-100;
    }

    &.yellow {
        @apply bg-yellow-100 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-100;
    }
}

.user-markdown {
    b, strong {
        @apply font-bold;
    }

    i, em {
        @apply italic
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-bold mt-4 mb-2 text-black dark:text-white;
    }

    h1 {
        @apply text-2xl;
    }

    h2 {
        @apply text-xl;
    }

    h3 {
        @apply text-lg;
    }

    h4 {
        @apply text-base;
    }

    h5 {
        @apply text-sm;
    }

    h6 {
        @apply text-xs;
    }

    p {
        @apply my-2 text-gray-800 dark:text-gray-300;
    }

    ul {
        @apply list-disc mb-2;
    }

    ol {
        @apply list-decimal mb-2;
    }

    li {
        @apply my-2 ml-7 text-gray-800 dark:text-gray-300;
    }
}