.Sui-CircularProgress{
    --sui-progress-color: inherit;
    @apply text-[color:var(--sui-progress-color)] w-8 h-8;
    &--color-primary{
        --sui-progress-color: theme('colors.primary.500');
    }
    &--color-secondary{
        --sui-progress-color: theme('colors.secondary.500');
    }
    &--color-info{
        --sui-progress-color: theme('colors.info.500');
    }
    &--color-warning{
        --sui-progress-color: theme('colors.warning.500');
    }
    &--color-error{
        --sui-progress-color: theme('colors.error.500');
    }
    &--color-success{
        --sui-progress-color: theme('colors.success.500');
    }
    &--color-basic{
        --sui-progress-color: theme('colors.basic.400');
    }
    &--color-dark{
        --sui-progress-color: theme('colors.basic.800');
    }
    &--color-light{
        --sui-progress-color: theme('colors.light.500');
    }

    &--determinate{
        circle{
            transition-property: stroke-dashoffset;
            @apply duration-500 ease-in-out;
        }
    }

    &__wrapper{
        @apply relative inline-block;
    }
    &__label{
        @apply absolute inset-1 flex justify-center items-center text-center text-sui-text text-xs;
    }

    &--hidden{
        @apply hidden;
    }
}