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

[x-cloak] {
    display: none;
}

button[type="submit"]:not([role="menuitem"]),
button[type="button"]:not([role="menuitem"]) {
    @apply border border-transparent rounded-md py-2 px-4 text-white dark:text-gray-100 bg-gray-900 dark:bg-gray-700 hover:bg-gray-800 dark:hover:bg-black dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-600 dark:focus:ring-gray-500 transition-all duration-200
}

input[type="checkbox"] {
    @apply text-gray-800 dark:text-gray-300 focus:ring-gray-600 dark:focus:ring-gray-500 border-gray-300 dark:border-gray-700 rounded;
}

.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;
    }
}