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

body {
    @apply bg-blue-100 dark:bg-slate-800 text-black dark:text-slate-400;
}

.heatmap svg {
    @apply overflow-visible mt-2;
}

@layer components {
    .card {
        @apply block p-6 bg-white rounded-lg border border-gray-200 dark:border-gray-700 shadow-md dark:bg-transparent;
    }

    .card-hr {
        @apply border-gray-200 dark:border-gray-700;
    }

    .card-divide {
        @apply divide-gray-200 dark:divide-gray-700;
    }

    a.card,
    button.card {
        @apply hover:bg-gray-100 dark:hover:bg-gray-700;
    }

    .card-header {
        @apply mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white;
    }

    .card-body {
        @apply font-normal text-gray-700 dark:text-gray-400;
    }

    header {
        @apply dark:bg-gradient-to-b dark:from-gray-900 dark:to-slate-800 text-black dark:text-inherit;
    }

    .btn-green {
        @apply w-fit mt-3 text-white border border-green-700 bg-green-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none dark:focus:ring-blue-800 transition duration-150 ease-out;
    }

    .btn-red {
        @apply w-fit mt-3 text-white border border-red-700 bg-red-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none dark:focus:ring-blue-800 transition duration-150 ease-out;
    }

    .btn-blue {
        @apply w-fit mt-3 text-white border border-blue-700 bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none dark:focus:ring-blue-800 transition duration-150 ease-out;
    }

    .btn-blue-outline {
        @apply w-fit mt-3 text-blue-700 dark:text-inherit hover:text-white border border-blue-700 hover:bg-blue-700 dark:bg-transparent focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:border-blue-600 dark:hover:bg-blue-600 focus:outline-none dark:focus:ring-blue-800 transition duration-150 ease-out;
    }

    .btn-skeleton-outline {
        @apply w-fit mt-3 border border-slate-700 bg-transparent font-medium rounded-lg text-sm px-5 py-2.5 pointer-events-none;
    }
}

.text-highlight {
    @apply text-blue-700 dark:text-blue-600;
}

.skeleton {
    @apply h-2 bg-slate-700 rounded animate-pulse;
}

.skeleton-highlight {
    @apply h-2 bg-blue-700 rounded animate-pulse;
}