@utility overview-card-* {
    border-inline-start-color: --value(--color-*);

    .overview-card-title {
        color: --value(--color-*);
    }

    .overview-card-icon {
        color: --value(--color-*);
    }
}

@layer components {
    .overview-card {
        @apply bg-white dark:bg-gray-800;
        @apply rounded-lg border border-gray-200 dark:border-gray-700;
        @apply p-2;
        @apply shadow;
        @apply overflow-hidden;
        @apply border-s-6 border-s-primary;
    }

    .overview-card-title {
        @apply text-xs font-bold text-primary uppercase mb-1;
    }

    .overview-card-number {
        @apply text-2xl font-bold mb-0;
    }

    .overview-card-icon {
        @apply text-primary w-10 h-10;
    }
}