@utility rating-bar-* {
    >* {
        &.active {
            color: --value(--color-*);

            @variant dark {
                color: --value(--color-*-500);
            }
        }
    }
}

@layer components {
    .rating-bar {
        @apply inline-flex items-center space-x-1 rtl:space-x-reverse;
        @apply text-gray-300 dark:text-gray-300;
        @apply fill-current;

        >* {
            &.active {
                @apply text-orange dark:text-orange-500;
            }
        }

    }
}