.Sui-Chip{
    --sui-chip-color: theme('colors.basic.100');
    --sui-chip-text: theme('colors.basic.600');
    --sui-chip-outline: theme('colors.basic.500');
    --sui-chip-px: 0.5rem;
    --sui-chip-py: 0.125rem;
    --sui-chip-height: 1.625rem;
    @apply inline-flex items-center rounded-full
    text-sm font-medium
    bg-[color:var(--sui-chip-color)] text-[color:var(--sui-chip-text)]
    ;
    &__Inner{
        @apply inline-flex items-center whitespace-nowrap space-x-1
        px-[0.15rem] py-[0.15rem]
        h-[var(--sui-chip-height)];
    }
    &__Text{
        @apply inline-block py-[var(--sui-chip-py)] first:pl-[var(--sui-chip-px)] last:pr-[var(--sui-chip-px)];
    }

    &__Icon{
        @apply inline-flex items-center justify-center;
        >.Sui-Icon{
            @apply inline-block w-[60%] h-[60%];
        }
    }

    &__Icon,
    &__Inner>.Sui-Avatar,
    &__Inner>.Sui-IconButton{
        @apply w-[calc(var(--sui-chip-height)-0.3rem)] h-[calc(var(--sui-chip-height)-0.3rem)]
    }

    &--filled{
        @apply bg-[color:var(--sui-chip-color)];
    }
    &--outlined{
        @apply bg-transparent border border-[color:var(--sui-chip-outline)] text-[color:var(--sui-chip-outline)];
    }

    &--size-slim{
        --sui-chip-px: 0.25rem;
        --sui-chip-py: 0.125rem;
        --sui-chip-height: 1.25rem;
        @apply text-xs;
    }
    &--size-normal{
        --sui-chip-px: 0.5rem;
        --sui-chip-py: 0.125rem;
        --sui-chip-height: 1.625rem;
        @apply text-xs;
    }
    &--size-large{
        --sui-chip-px: 0.5rem;
        --sui-chip-py: 0.125rem;
        --sui-chip-height: 2rem;
        @apply text-sm;
    }
    /* Disabled */
    &--disabled{
        @apply opacity-50;
        &.Sui-ButtonBase{
            @apply cursor-not-allowed;
        }
    }
    /* Color */
    &--color-primary{
        --sui-chip-color: theme('colors.primary.500');
        --sui-chip-text: theme('colors.primary.contrast');
        --sui-chip-outline: theme('colors.primary.500');
    }
    &--color-secondary{
        --sui-chip-color: theme('colors.secondary.500');
        --sui-chip-text: theme('colors.secondary.contrast');
        --sui-chip-outline: theme('colors.secondary.500');
    }
    &--color-basic{
        --sui-chip-color: theme('colors.basic.100');
        --sui-chip-text: theme('colors.basic.600');
        --sui-chip-outline: theme('colors.basic.500');
    }
    &--color-info{
        --sui-chip-color: theme('colors.info.500');
        --sui-chip-text: theme('colors.info.contrast');
        --sui-chip-outline: theme('colors.info.500');
    }
    &--color-success{
        --sui-chip-color: theme('colors.success.500');
        --sui-chip-text: theme('colors.success.contrast');
        --sui-chip-outline: theme('colors.success.500');
    }
    &--color-warning{
        --sui-chip-color: theme('colors.warning.500');
        --sui-chip-text: theme('colors.warning.contrast');
        --sui-chip-outline: theme('colors.warning.500');
    }
    &--color-error{
        --sui-chip-color: theme('colors.error.500');
        --sui-chip-text: theme('colors.error.contrast');
        --sui-chip-outline: theme('colors.error.500');
    }
    &--color-dark{
        --sui-chip-color: theme('colors.basic.600');
        --sui-chip-text: theme('colors.white');
        --sui-chip-outline: theme('colors.basic.600');
    }
    &--color-light{
        --sui-chip-color: white;
        --sui-chip-text: theme('colors.primary.500');
        --sui-chip-outline: white;
    }
}