.Sui-Radio{
    --sui-box-size: calc(theme('sui.control.slim.height') * 0.75);
    --sui-box-border: theme('colors.sui.border');
    --sui-box-bg: theme('colors.sui.bg');
    --sui-box-color: theme('colors.primary.500');
    --sui-input-margin: theme('sui.spacing.control.margin');
    --sui-label-color: inherit;
    --sui-helper-color: theme('colors.sui.textDim');
    @apply flex flex-nowrap my-[var(--sui-input-margin)];
    &__Box{
        @apply relative inline-flex justify-center items-center cursor-pointer
        w-[var(--sui-box-size)]  h-[var(--sui-box-size)]
        bg-[color:var(--sui-box-bg)] border border-[color:var(--sui-box-border)]
        ring-0 ring-inset ring-[color:var(--sui-box-color)]
        text-[color:var(--sui-box-color)]
        rounded-full;
        >.Sui-Icon{
            @apply w-3/5 h-3/5 scale-50 -rotate-12 opacity-0 transition duration-200 ease-out;
        }
    }
    >input{
        @apply hidden absolute -z-10;
        &:checked + .Sui-Radio__Box{
            @apply border-[color:var(--sui-box-color)] ring-1;
            >.Sui-Icon{
                @apply scale-100 rotate-0 opacity-100;
            }
        }
        &:disabled + .Sui-Radio__Box{
            @apply opacity-50 cursor-not-allowed;
        }
    }
    &__Text{
        @apply ml-2 mb-0 text-[color:var(--sui-input-text)] leading-[var(--sui-box-size)];
    }


    /**
    COLORS
    */
    &--basic{
        --sui-box-color: theme('colors.basic.500');
    }
    &--primary{
        --sui-box-color: theme('colors.primary.500');
    }
    &--secondary{
        --sui-box-color: theme('colors.secondary.500');
    }
    &--warning{
        --sui-box-color: theme('colors.warning.500');
    }
    &--info{
        --sui-box-color: theme('colors.info.500');
    }
    &--error{
        --sui-box-color: theme('colors.error.500');
    }
    &--success{
        --sui-box-color: theme('colors.success.500');
    }
    &--hasError{
        --sui-label-color: theme('colors.error.500');
        --sui-helper-color: theme('colors.error.500');
    }
    &--hasSuccess{
        --sui-label-color: theme('colors.success.500');
        --sui-helper-color: theme('colors.success.500');
    }

    &--dark{
        --sui-box-color: theme('colors.basic.900');
    }
    &--light{
        --sui-box-bg: theme('colors.light.50');
        --sui-box-border: theme('colors.light.500');
        --sui-box-color: theme('colors.light.500');
        --sui-input-text: theme('colors.light.500');
    }

    /* Margin */
    &--marginNormal{
        --sui-input-margin: theme('sui.spacing.control.margin');
    }
    &--marginDense{
        --sui-input-margin: theme('sui.spacing.control.marginDense');
    }
    &--marginNone{
        --sui-input-margin: 0;
    }

    /* Size */
    &--slim{
        --sui-box-size: theme('sui.control.slim.toggleHeight');
    }
    &--normal{
        --sui-box-size: theme('sui.control.normal.toggleHeight');
    }
    &--large{
        --sui-box-size: theme('sui.control.large.toggleHeight');
    }

    &__HelperText {
        @apply flex flex-nowrap text-xs font-medium leading-none mt-1 text-[color:var(--sui-helper-color)];
    }
}