.Sui-Avatar{
    --sui-avatar-size: theme('sui.control.normal.height');
    --sui-avatar-color: theme('colors.basic.100');
    --sui-avatar-text: theme('colors.basic.900');
    @apply inline-flex items-center justify-center relative rounded-full overflow-hidden text-sm font-medium
    w-[var(--sui-avatar-size)] h-[var(--sui-avatar-size)]
    bg-[color:var(--sui-avatar-color)] text-[color:var(--sui-avatar-text)];

    > *{
        @apply m-0 text-inherit;
    }
    > img{
        @apply w-full h-full object-cover;
    }
    > .Sui-Icon{
        @apply w-3/5 h-3/5;
    }

    /* size */
    &--slim{
        --sui-avatar-size: theme('sui.control.slim.height');
        @apply text-xs;
    }
    &--normal{
        --sui-avatar-size: theme('sui.control.normal.height');
        @apply text-sm;
    }
    &--large{
        --sui-avatar-size: theme('sui.control.large.height');
        @apply text-lg;
    }

    /* variant */
    &--circular{
        @apply rounded-full
    }
    &--rounded{
        @apply rounded-control
    }
    &--square{
        @apply rounded-none
    }

    /**
    COLORS
    */
    &--primary{
        --sui-avatar-color: theme('colors.primary.500');
        --sui-avatar-text: theme('colors.primary.contrast');
    }
    &--secondary{
        --sui-avatar-color: theme('colors.secondary.500');
        --sui-avatar-text: theme('colors.secondary.contrast');
    }
    &--basic{
        --sui-avatar-color: theme('colors.basic.100');
        --sui-avatar-text: theme('colors.basic.900');
    }
    &--info{
        --sui-avatar-color: theme('colors.info.500');
        --sui-avatar-text: theme('colors.info.contrast');
    }
    &--success{
        --sui-avatar-color: theme('colors.success.500');
        --sui-avatar-text: theme('colors.success.contrast');
    }
    &--warning{
        --sui-avatar-color: theme('colors.warning.500');
        --sui-avatar-text: theme('colors.warning.contrast');
    }
    &--error{
        --sui-avatar-color: theme('colors.error.500');
        --sui-avatar-text: theme('colors.error.contrast');
    }
    &--dark{
        --sui-avatar-color: theme('colors.basic.600');
        --sui-avatar-text: theme('colors.white');
    }
    &--light{
        --sui-avatar-color: white;
        --sui-avatar-text: theme('colors.primary.500');
    }

    &.has-image{
        &.has-loaded {
            --sui-avatar-color: transparent;
        }
    }
}