.Sui-Alert {
    --sui-alert-bg: theme('colors.basic.100');
    --sui-alert-text: theme('colors.sui.text');
    --sui-alert-margin: theme('sui.spacing.control.marginDense');
    @apply inline-flex flex-nowrap items-center bg-[color:var(--sui-alert-bg)] text-[color:var(--sui-alert-text)] leading-none
    space-x-2 px-3 py-1.5 my-[var(--sui-alert-margin)];
    &__Icon, >.Sui-Icon{
        @apply w-5 h-5 shrink-0;
    }
    &__Content{
        @apply flex-auto font-medium leading-tight px-0 py-2;
    }
    &__Close{
        --sui-btn-color: inherit;
        --sui-btn-color-outline: inherit;
        @apply shrink-0 w-6 h-6 -mt-0.5;
    }

    &--fullWidth{
        @apply flex w-full;
    }

    &--elevation{
        @apply shadow;
    }

    &--size-slim{
        @apply space-x-1.5 px-2.5 py-0;
        .Sui-Text{
            @apply  text-sm
        }

    }
    &--size-normal{
        @apply space-x-2 px-3 py-1;
        .Sui-Text{
            @apply  text-sm
        }
    }
    &--size-large{
        @apply space-x-2 px-4 py-3;
        .Sui-Text{
            @apply  text-base
        }
        .Sui-Alert__Close{
            @apply w-7 h-7;
        }
    }


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