.Sui-SegmentedControl{
    --sui-sc-bg-color: theme('colors.gray.100');
    --sui-sc-color: theme('colors.white');
    --sui-sc-text: theme('colors.sui.text');
    --sui-sc-active-text: theme('colors.sui.text');
    --sui-sc-px: 0.25rem;
    --sui-sc-py: 0.25rem;
    --sui-sc-radius: theme('sui.radius.control');
    @apply bg-[color:var(--sui-sc-bg-color)] text-[color:var(--sui-sc-text)]
        px-[var(--sui-sc-px)] py-[var(--sui-sc-py)] rounded-[var(--sui-sc-radius)];
    &__Wrapper{
         @apply flex flex-nowrap relative;
    }
    &__Item{
         @apply flex-1;
        &:not(:first-child):not(:last-child){
            margin-right: var(--sui-sc-px);
        }
        .Sui-Button {
            color: var(--sui-sc-text);
            @apply focus:ring-0;
        }
        &.selected{
            .Sui-Button {
                color: var(--sui-sc-active-text);
                background-color: transparent;
            }
        }
    }
    &__Backdrop{
        @apply absolute top-0 bottom-0 bg-[color:var(--sui-sc-color)] rounded-[var(--sui-sc-radius)] transition-all duration-300 ease-in-out;
    }

    /**
    ROUNDED
    */
    &--rounded{
        --sui-sc-radius: theme('sui.radius.control');
    }
    &--pill{
        --sui-sc-radius: theme('sui.radius.full');
    }
    &--square{
        --sui-sc-radius: 0px;
    }

    /**
    COLORS
    */

    &--basic{
        --sui-sc-color: theme('colors.white');
        --sui-sc-active-text: theme('colors.sui.text');
    }
    &--primary{
        --sui-sc-color: theme('colors.primary.500');
        --sui-sc-active-text: theme('colors.primary.contrast');
    }
    &--secondary{
        --sui-sc-color: theme('colors.secondary.500');
        --sui-sc-active-text: theme('colors.secondary.contrast');
    }
    &--info{
        --sui-sc-color: theme('colors.info.500');
        --sui-sc-active-text: theme('colors.info.contrast');
    }
    &--success{
        --sui-sc-color: theme('colors.success.500');
        --sui-sc-active-text: theme('colors.success.contrast');
    }
    &--warning{
        --sui-sc-color: theme('colors.warning.500');
        --sui-sc-active-text: theme('colors.warning.contrast');
    }
    &--error{
        --sui-sc-color: theme('colors.error.500');
        --sui-sc-active-text: theme('colors.error.contrast');
    }
    &--dark{
        --sui-sc-color: theme('colors.basic.600');
        --sui-sc-active-text: theme('colors.white');
    }
    &--light{
        --sui-sc-color: theme('colors.light.500');
        --sui-sc-active-text: theme('colors.sui.text');
        --sui-sc-text: theme('colors.light.500');
        --sui-sc-bg-color: theme('colors.light.75');
    }
    /**
    BG COLORS
    */

    &--bg-basic{
        --sui-sc-bg-color: theme('colors.gray.100');
        --sui-sc-text: theme('colors.sui.text');
    }
    &--bg-primary{
        --sui-sc-bg-color: theme('colors.primary.500');
        --sui-sc-text: theme('colors.primary.contrast');
    }
    &--bg-secondary{
        --sui-sc-bg-color: theme('colors.secondary.500');
        --sui-sc-text: theme('colors.secondary.contrast');
    }
    &--bg-info{
        --sui-sc-bg-color: theme('colors.info.500');
        --sui-sc-text: theme('colors.info.contrast');
    }
    &--bg-success{
        --sui-sc-bg-color: theme('colors.primary.500');
        --sui-sc-text: theme('colors.primary.contrast');
    }
    &--bg-warning{
        --sui-sc-bg-color: theme('colors.warning.500');
        --sui-sc-text: theme('colors.warning.contrast');
    }
    &--bg-error{
        --sui-sc-bg-color: theme('colors.error.500');
        --sui-sc-text: theme('colors.error.contrast');
    }
    &--bg-dark{
        --sui-sc-bg-color: theme('colors.gray.600');
        --sui-sc-text: theme('colors.white');
    }
    &--bg-light{
        --sui-sc-bg-color: theme('colors.light.500');
        --sui-sc-text: theme('colors.sui.text');
    }
}