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

@layer components {
    .badge{
        @apply text-xs inline-block py-1 px-2.5 uppercase leading-none text-center whitespace-nowrap align-baseline font-bold rounded-full;
    }

    .badge-blue{
        @apply bg-blue-100 text-blue-500;
    }

    .badge-green{
        @apply bg-green-100 text-green-500;
    }

    .badge-red{
        @apply bg-red-100 text-red-400;
    }

    .badge-gray{
        @apply bg-gray-100 text-gray-400;
    }

    .badge-orange{
        @apply bg-orange-100 text-orange-400;
    }

    .badge-purple{
        @apply bg-purple-100 text-purple-400;
    }

    .badge-pink{
        @apply bg-pink-100 text-pink-400;
    }

    .badge-indigo{
        @apply bg-indigo-200 text-indigo-400;
    }
}

.loaded {
    animation: loaded 1s ease-in-out 1;
}

.updated {
    animation: updated 1s ease-in-out 1;
}

.deleted {
    animation: deleted 0.5s ease-in-out 1;
}

@keyframes loaded {
    50% {
        background-color: #f6fbff;
    }
}

@keyframes updated {
    50% {
        background-color: #f6fffa;
    }
}

@keyframes deleted {
    100% {
        background-color: red;
        opacity: 0;
    }
}
