.Sui-List{
    --sui-list-text: theme('colors.sui.text');
    --sui-list-px: theme('sui.control.normal.px');
    --sui-list-py: theme('sui.control.normal.py');
    --sui-list-height: theme('sui.spacing.list.itemHeight');
    --sui-list-radius: theme('sui.radius.control');
    --sui-list-bg: theme('colors.sui.bgDim');
    --sui-list-bg-hover: theme('colors.basic.100');
    --sui-list-bg-active: theme('colors.basic.200');
    --sui-list-spacing: theme('sui.spacing.list.itemMargin');
    --sui-list-group-spacing: theme('sui.spacing.list.groupMargin');
    @apply flex flex-col;
    &Item{
        @apply flex w-full flex-nowrap items-center justify-start leading-none text-sm font-medium
        text-[color:var(--sui-list-text)] bg-[color:var(--sui-list-bg)] hover:bg-[color:var(--sui-list-bg-hover)] active:bg-[color:var(--sui-list-bg-focus)]
        min-h-[var(--sui-list-height)] px-[var(--sui-list-px)] py-[var(--sui-list-py)] rounded-[var(--sui-list-radius)];

        &:not(:last-child){
            @apply mb-[var(--sui-list-spacing)];
        }

        &__Inner{
            @apply flex-1 text-left rtl:text-right;
        }
        &--disableGutters{
            --sui-list-height: auto;
            --sui-list-px: 0;
            --sui-list-py: 0;
        }

        /**
        ICONS
        */
        &__startIcon,
        &__endIcon{
            .Sui-Icon{
                @apply w-4 h-4;
            }
        }
        &__startIcon{
            @apply mr-2 ltr:mr-0 ltr:ml-2 shrink-0;
        }
        &__endIcon{
            @apply ml-2 ltr:ml-0 ltr:mr-2 shrink-0;
        }
    }
    &Group{
        @apply flex flex-col w-full mb-[var(--sui-list-group-spacing)];
        &__Heading{
            @apply mb-1 font-medium text-xs text-sui-text;
        }
    }

    &--color-dim{
        --sui-list-bg: theme('colors.sui.bgDim');
        --sui-list-bg-hover: theme('colors.basic.100');
        --sui-list-bg-active: theme('colors.basic.200');
    }
    &--color-default{
        --sui-list-bg: theme('colors.sui.bg');
        --sui-list-bg-hover: theme('colors.basic.50');
        --sui-list-bg-active: theme('colors.basic.100');
    }

    /*Spacing*/
    &--spacing-dense{
        --sui-list-spacing: theme('sui.spacing.list.itemMarginDense');
    }
    &--spacing-none{
        --sui-list-spacing: 0;
    }

    &--grouped{
        .Sui-ListGroup>.Sui-ListItem{
            &:not(:first-child){
                @apply rounded-t-none;
            }
            &:not(:last-child){
                @apply rounded-b-none;
            }
        }
    }
}