@layer components {
    .legend-list {
        @apply list-disc pl-5 space-y-2 text-gray-800 dark:text-gray-300;
    }

    .legend-item {
        @apply flex items-center;
    }

    .legend-icon {
        @apply relative w-6 h-6 mr-2;
    }

    .legend-circle {
        @apply absolute inset-0 rounded-full border-2 border-black;
    }

    .legend-circle.content {
        @apply bg-gray-700 dark:bg-gray-300;
        background-color: #d6c1a8;
    }

    .legend-letter {
        @apply absolute inset-0 flex items-center justify-center text-black text-xs;
    }
}