@utility progress-* {
    .progress-bar {
        background-color: --value(--color-*);
    }
}

@layer components {
    .progress {
        @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 text-white text-xs;

        &.xs {
            @apply h-1;

            .progress-bar {
                @apply h-1 text-xxs;
            }
        }

        &.sm {
            @apply h-1.5;

            .progress-bar {
                @apply h-1.5 text-xs;
            }
        }

        &.lg {
            @apply h-4;

            .progress-bar {
                @apply h-4 text-sm;
            }
        }

        &.xl {
            @apply h-6;

            .progress-bar {
                @apply h-6 text-base;
            }
        }
    }

    .progress-bar {
        @apply flex items-center justify-center text-[0.5rem] font-medium text-primary-100 h-full rounded-full leading-none text-center bg-primary-600 dark:bg-primary-500;
    }
}