Untitled

 if (
                        [
                            'BtnState',
                            'BtnStyle',
                            'BtnDefault',
                            'BtnHovered',
                            'BtnPressed',
                        ]?.includes(item)
                    ) {
                        const cel = getComponentModel(component);
                        const btnRule = getRuleName(component);
                        const cel1 = getComponentModel(component,"sub");
                        const btnRule1 = getRuleName(component,"main");
                        const jClass = ['elHovered', 'elActive'];
                        const cAct = cel1?.getClasses().find(item => jClass.includes(item));
                        // const mainClass = cel?.getClasses().find(item => item.includes('btn-'));
                        if (item === 'BtnStyle') {
                            const nclass = ['btnStyle1', 'btnStyle2', 'btnStyle3'];
                            const fClass = cel?.getClasses().find(item => nclass.includes(item));
                            if (fClass) {
                                newCSStateValue = { ...newCSStateValue, 'button-style': fClass };
                            } else {
                                newCSStateValue = { ...newCSStateValue, 'button-style': 'none' };
                                setBtnOptions(true);
                            }
                        } else if (item === 'BtnDefault') {
                            const rules = editor.Css.getRule(`${btnRule}`);
                            const rules1 = editor.Css.getRule(
                                `${btnRule} .elButtonContent .elButtonPrimary`,
                            );
                            const rules2 = editor.Css.getRule(
                                `${btnRule} .elButtonContent .elButtonSub`,
                            );
                            newCSStateValue = {
                                ...newCSStateValue,
                                'button-default': {
                                    state: cAct ? 'inactive' : 'active',
                                    background:
                                        rules?.attributes.style?.['background-color'] ||
                                        'rgba(1, 116, 199, 1)',
                                    color: rules1?.attributes.style?.['color'] || '#ffffffff',
                                    subcolor: rules2?.attributes.style?.['color'] || '#ffffffff',
                                },
                            };
                        } else if (item === 'BtnHovered') {
                            const choverRule = editor.Css.getRule(`${btnRule1} .elHovered`);
                            const choverRule1 = editor.Css.getRule(
                                `${btnRule1} .elHovered div .elButtonPrimary`,
                            );
                            const choverRule2 = editor.Css.getRule(
                                `${btnRule1} .elHovered div .elButtonSub`,
                            );
                            newCSStateValue = {
                                ...newCSStateValue,
                                'button-hovered': {
                                    state: cAct === 'elHovered' ? 'active' : 'inactive',
                                    background:
                                        choverRule?.attributes.style?.['background-color'] ||
                                        'rgba(20, 138, 255,1)',
                                    color: choverRule1?.attributes.style?.['color']?.replace("!important","") || '#ffffffff',
                                    subcolor:
                                        choverRule2?.attributes.style?.['color']?.replace("!important","") || '#ffffffff',
                                },
                            };
                        } else if (item === 'BtnPressed') {
                            const cactiveRule = editor.Css.getRule(`${btnRule1} .elActive`);
                            const cactiveRule1 = editor.Css.getRule(
                                `${btnRule1} .elActive div .elButtonPrimary`,
                            );
                            const cactiveRule2 = editor.Css.getRule(
                                `${btnRule1} .elActive .elButtonSub`,
                            );
                            newCSStateValue = {
                                ...newCSStateValue,
                                'button-pressed': {
                                    state: cAct === 'elActive' ? 'active' : 'inactive',
                                    background:
                                        cactiveRule?.attributes.style?.['background-color'] ||
                                        'rgba(20, 138, 255,1)',
                                    color: cactiveRule1?.attributes.style?.['color']?.replace("!important","") || '#ffffffff',
                                    subcolor:
                                        cactiveRule2?.attributes.style?.['color']?.replace("!important","") || '#ffffffff',
                                },
                            };
                        }
                    }