.Sui-Badge {
    --sui-badge-bg: theme('colors.primary.500');
    --sui-badge-text: theme('colors.primary.contrast');
    --sui-badge-size: 1.25rem;
    --sui-badge-font: 0.75rem;
    --sui-badge-px: 0.375rem;
    --sui-badge-translate-x: 40%;
    --sui-badge-translate-y: -40%;
    --sui-badge-scale: 1;
    @apply inline-flex justify-center items-center font-medium rounded-full leading-none z-10 transition-transform duration-200 ease-out
        h-[var(--sui-badge-size)] min-w-[var(--sui-badge-size)] px-[var(--sui-badge-px)]
        bg-[color:var(--sui-badge-bg)] text-[color:var(--sui-badge-text)];
    font-size: var(--sui-badge-font);

    &__Wrapper{
        @apply relative inline-flex z-10;
        .Sui-Badge{
            @apply absolute;
            transform: translate(var(--sui-badge-translate-x), var(--sui-badge-translate-y)) scale(var(--sui-badge-scale));
        }
    }

    &--anchor-top-right{
        --sui-badge-translate-x: 40%;
        --sui-badge-translate-y: -40%;
        @apply top-0 right-0;
    }
    &--anchor-top-left{
        --sui-badge-translate-x: -40%;
        --sui-badge-translate-y: -40%;
        @apply top-0 left-0;
    }
    &--anchor-bottom-right{
        --sui-badge-translate-x: 40%;
        --sui-badge-translate-y: 40%;
        @apply bottom-0 right-0;
    }
    &--anchor-bottom-left{
        --sui-badge-translate-x: -40%;
        --sui-badge-translate-y: 40%;
        @apply bottom-0 left-0;
    }

    &--dot{
        --sui-badge-size: 0.5rem;
        --sui-badge-font: 0;
        --sui-badge-px: 0;
        --sui-badge-translate-x: 20%;
        --sui-badge-translate-y: -20%;
    }


    &--invisible{
        --sui-badge-scale: 0;
    }

    /*COLORS*/
    &--primary{
        --sui-badge-bg: theme('colors.primary.500');
        --sui-badge-text: theme('colors.primary.contrast');
    }
    &--secondary{
        --sui-badge-bg: theme('colors.secondary.500');
        --sui-badge-text: theme('colors.secondary.contrast');
    }
    &--basic{
        --sui-badge-bg: theme('colors.basic.100');
        --sui-badge-text: theme('colors.sui.text');
    }
    &--success{
        --sui-badge-bg: theme('colors.success.500');
        --sui-badge-text: theme('colors.success.contrast');
    }
    &--error{
        --sui-badge-bg: theme('colors.error.500');
        --sui-badge-text: theme('colors.error.contrast');
    }
    &--warning{
        --sui-badge-bg: theme('colors.warning.500');
        --sui-badge-text: theme('colors.warning.contrast');
    }
    &--info{
        --sui-badge-bg: theme('colors.info.500');
        --sui-badge-text: theme('colors.info.contrast');
    }
}