// External dependencies.
import React, { ReactElement } from 'react';

// Divi dependencies.
import {
	StyleContainer,
	StylesProps,
	TextStyle,
} from '@divi/module';

// Local dependencies.
import { CheckboxesFilterAttrs } from './types';
import {createBorderStyles, extractBorderAttrs, extractSpasingAttrs, extractTypographyAttrs} from "../../utils";

/**
 * Dynamic Module's style components.
 *
 * @since ??
 */
 const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<CheckboxesFilterAttrs>): ReactElement => {
	const itemTypography = extractTypographyAttrs(attrs?.module?.decoration?.itemTypography);
	const itemBorder = extractBorderAttrs(attrs?.module?.decoration?.itemBorder);
	const itemSpacing = extractSpasingAttrs(attrs?.module?.decoration?.itemSpacing);
	const radioBorder = extractBorderAttrs(attrs?.module?.decoration?.radioBorder);
	const labelTypography = extractTypographyAttrs(attrs?.module?.decoration?.labelTypography);
	const applyTypography = extractTypographyAttrs(attrs?.module?.decoration?.applyTypography);
	const applyBorder = extractBorderAttrs(attrs?.module?.decoration?.applyBorder);
	const applySpacing = extractSpasingAttrs(attrs?.module?.decoration?.applySpacing);
	const searchItemsTypography = extractTypographyAttrs(attrs?.module?.decoration?.searchItemsTypography);
	const searchInputBorder = extractBorderAttrs(attrs?.module?.decoration?.searchInputBorder);
	const searchInputPadding = extractSpasingAttrs(attrs?.module?.decoration?.searchInputPadding);
	const searchInputMargin = extractSpasingAttrs(attrs?.module?.decoration?.searchInputMargin);
	const moreLessButtonTypography = extractTypographyAttrs(attrs?.module?.decoration?.moreLessButtonTypography);
	const moreLessButtonBorder = extractBorderAttrs(attrs?.module?.decoration?.moreLessButtonBorder);
	const moreLessButtonPadding = extractSpasingAttrs(attrs?.module?.decoration?.moreLessButtonPadding);
	const moreLessBorder = extractBorderAttrs(attrs?.module?.decoration?.moreLessBorder);
	const moreLessPadding = extractSpasingAttrs(attrs?.module?.decoration?.moreLessPadding);
	const dropdownLabelTypography = extractTypographyAttrs(attrs?.module?.decoration?.dropdownLabelTypography);
	const dropdownLabelBorder = extractBorderAttrs(attrs?.module?.decoration?.dropdownLabelBorder);
	const dropdownLabelPadding = extractSpasingAttrs(attrs?.module?.decoration?.dropdownLabelPadding);
	const dropdownActiveItemTypography = extractTypographyAttrs(attrs?.module?.decoration?.dropdownActiveItemTypography);
	const dropdownActiveItemBorder = extractBorderAttrs(attrs?.module?.decoration?.dropdownActiveItemBorder);
	const dropdownActiveItemPadding = extractSpasingAttrs(attrs?.module?.decoration?.dropdownActiveItemPadding);
	const dropdownNSelectedTypography = extractTypographyAttrs(attrs?.module?.decoration?.dropdownNSelectedTypography);
	const dropdownNSelectedMargin = extractSpasingAttrs(attrs?.module?.decoration?.dropdownNSelectedMargin);
	const dropdownBodyBorder = extractBorderAttrs(attrs?.module?.decoration?.dropdownBodyBorder);
	const dropdownBodyItemsPadding = extractSpasingAttrs(attrs?.module?.decoration?.dropdownBodyItemsPadding);
	const dropdownFooterBorder = extractBorderAttrs(attrs?.module?.decoration?.dropdownFooterBorder);
	const dropdownFooterMargin = extractSpasingAttrs(attrs?.module?.decoration?.dropdownFooterMargin);
	const dropdownFooterPadding = extractSpasingAttrs(attrs?.module?.decoration?.dropdownFooterPadding);
	const itemBorderStyles = createBorderStyles(`${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__button`, itemBorder);
	const radioBorderStyles = createBorderStyles(`${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator`, radioBorder);
	const applyBorderStyles = createBorderStyles(`${orderClass} .apply-filters__button`, applyBorder);
	const searchInputBorderStyles = createBorderStyles(`${orderClass} .jet-filter-items-search__input`, searchInputBorder);
	const moreLessButtonBorderStyles = createBorderStyles(`${orderClass} .jet-filter-items-moreless__toggle`, moreLessButtonBorder);
	const moreLessBorderStyles = createBorderStyles(`${orderClass} .jet-filter-items-moreless`, moreLessBorder);
	const dropdownLabelBorderStyles = createBorderStyles(`${orderClass} .jet-filter-items-dropdown__label`, dropdownLabelBorder);
	const dropdownActiveItemBorderStyles = createBorderStyles(`${orderClass} .jet-filter-items-dropdown__active__item`, dropdownActiveItemBorder);
	const dropdownBodyBorderStyles = createBorderStyles(`${orderClass} .jet-filter-items-dropdown__body`, dropdownBodyBorder);
	const dropdownFooterBorderStyles = createBorderStyles(`${orderClass} .jet-filter-items-dropdown__footer`, dropdownFooterBorder);

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
					advancedStyles: [
						...itemBorderStyles,
						...radioBorderStyles,
						...applyBorderStyles,
						...searchInputBorderStyles,
						...moreLessButtonBorderStyles,
						...moreLessBorderStyles,
						...dropdownLabelBorderStyles,
						...dropdownActiveItemBorderStyles,
						...dropdownBodyBorderStyles,
						...dropdownFooterBorderStyles,
						{
							componentName: "divi/common",
							props: {
								property: 'display',
								selector: `${orderClass} .jet-checkboxes-list__row, ${orderClass} .jet-list-tree__children`,
								attr: attrs?.module?.decoration?.filtersPosition,
							}
						},
						{
							componentName: "divi/common",
							props: {
								property: 'margin-bottom',
								selector: `${orderClass} .jet-checkboxes-list__row:not(:last-child), ${orderClass} .jet-list-tree__children:not(:last-child)`,
								attr: attrs?.module?.decoration?.gapY
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'display',
								selector: `${orderClass} .jet-checkboxes-list__decorator`,
								attr: attrs?.module?.decoration?.showDecorator
							}
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-family',
								selector: `${orderClass} .jet-checkboxes-list__label`,
								attr: itemTypography.fontFamily,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: `${orderClass} .jet-checkboxes-list__label`,
								attr: itemTypography.fontSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'line-height',
								selector: `${orderClass} .jet-checkboxes-list__label`,
								attr: itemTypography.lineHeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'letter-spacing',
								selector: `${orderClass} .jet-checkboxes-list__label`,
								attr: itemTypography.letterSpacing,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-weight',
								selector: `${orderClass} .jet-checkboxes-list__label`,
								attr: itemTypography.fontWeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-style',
								selector: `${orderClass} .jet-checkboxes-list__label`,
								attr: itemTypography.fontStyle,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-transform',
								selector: `${orderClass} .jet-checkboxes-list__label`,
								attr: itemTypography.textTransform,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-decoration',
								selector: `${orderClass} .jet-checkboxes-list__label`,
								attr: itemTypography.textDecoration,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-align',
								selector: `${orderClass} .jet-checkboxes-list__label`,
								attr: itemTypography.textAlign,
							},
						},

						{
							componentName: "divi/common",
							props: {
								property: 'color',
								selector: `${orderClass} .jet-checkboxes-list__button`,
								attr: attrs?.module?.decoration?.itemNormalColor,
							}
						},
						{
							componentName: "divi/common",
							props: {
								property: 'background-color',
								selector: `${orderClass} .jet-checkboxes-list__button`,
								attr: attrs?.module?.decoration?.itemNormalBgColor,
							}
						},

						{
							componentName: "divi/common",
							props: {
								property: 'color',
								selector: `${orderClass} .jet-checkboxes-list__button:hover`,
								attr: attrs?.module?.decoration?.itemHoverColor,
							}
						},
						{
							componentName: "divi/common",
							props: {
								property: 'background-color',
								selector: `${orderClass} .jet-checkboxes-list__button:hover`,
								attr: attrs?.module?.decoration?.itemHoverBgColor,
							}
						},

						{
							componentName: "divi/common",
							props: {
								property: 'color',
								selector: `${orderClass} .jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button`,
								attr: attrs?.module?.decoration?.itemCheckedColor,
							}
						},
						{
							componentName: "divi/common",
							props: {
								property: 'background-color',
								selector: `${orderClass} .jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button`,
								attr: attrs?.module?.decoration?.itemCheckedBgColor,
							}
						},

						{
							componentName: 'divi/common',
							props: {
								property: 'border-style',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__button`,
								attr: itemBorder.style,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__button`,
								attr: itemBorder.width,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__button`,
								attr: itemBorder.color,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-radius',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__button`,
								attr: itemBorder.radius,
							},
						},

						{
							componentName: "divi/common",
							props: {
								property: "padding",
								selector: `${orderClass} .jet-checkboxes-list__button`,
								attr: itemSpacing.padding,
							},
						},

						{
							componentName: "divi/common",
							props: {
								property: "margin",
								selector: `${orderClass} .jet-checkboxes-list__button`,
								attr: itemSpacing.margin,
							},
						},


						{
							componentName: "divi/common",
							props: {
								property: 'width',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator`,
								attr: attrs?.module?.decoration?.radioSize,
							}
						},
						{
							componentName: "divi/common",
							props: {
								property: 'height',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator`,
								attr: attrs?.module?.decoration?.radioSize,
							}
						},

						{
							componentName: "divi/common",
							props: {
								property: 'margin-top',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator`,
								attr: attrs?.module?.decoration?.radioTopOffset,
							}
						},

						{
							componentName: "divi/common",
							props: {
								property: 'margin-right',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator`,
								attr: attrs?.module?.decoration?.radioLabelOffset,
							}
						},

						{
							componentName: "divi/common",
							props: {
								property: 'font-size',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__checked-icon`,
								attr: attrs?.module?.decoration?.checkedIconSize,
							}
						},
						{
							componentName: "divi/common",
							props: {
								property: 'color',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__checked-icon`,
								attr: attrs?.module?.decoration?.checkedIconColor,
							}
						},
						{
							componentName: "divi/common",
							props: {
								property: "background-color",
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator`,
								attr: attrs?.module?.decoration?.radioNormalBackgroundColor,
							},
						},
						{
							componentName: "divi/common",
							props: {
								property: "background-color",
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__input:checked+.jet-checkboxes-list__button .jet-checkboxes-list__decorator`,
								attr: attrs?.module?.decoration?.radioCheckedBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-style',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator`,
								attr: radioBorder.style,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator`,
								attr: radioBorder.width,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator`,
								attr: radioBorder.color,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-radius',
								selector: `${orderClass} .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator`,
								attr: radioBorder.radius,
							},
						},

						{
							componentName: 'divi/common',
							props: {
								property: 'font-family',
								selector: `${orderClass} .jet-filter-label`,
								attr: labelTypography.fontFamily,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: `${orderClass} .jet-filter-label`,
								attr: labelTypography.fontSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'line-height',
								selector: `${orderClass} .jet-filter-label`,
								attr: labelTypography.lineHeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'letter-spacing',
								selector: `${orderClass} .jet-filter-label`,
								attr: labelTypography.letterSpacing,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-weight',
								selector: `${orderClass} .jet-filter-label`,
								attr: labelTypography.fontWeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-style',
								selector: `${orderClass} .jet-filter-label`,
								attr: labelTypography.fontStyle,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-transform',
								selector: `${orderClass} .jet-filter-label`,
								attr: labelTypography.textTransform,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-decoration',
								selector: `${orderClass} .jet-filter-label`,
								attr: labelTypography.textDecoration,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-align',
								selector: `${orderClass} .jet-filter-label`,
								attr: labelTypography.textAlign,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-align',
								selector: `${orderClass} .jet-filter-label`,
								attr: attrs?.module?.decoration?.labelAlignment,
							},
						},
						{
							componentName: "divi/common",
							props: {
								property: 'color',
								selector: `${orderClass} .jet-filter-label`,
								attr: attrs?.module?.decoration?.labelColor,
							}
						},

						{
							componentName: "divi/common",
							props: {
								property: 'margin-bottom',
								selector: `${orderClass} .jet-filter-label`,
								attr: attrs?.module?.decoration?.labelGapY,
							}
						},

						// Apply Filter Button styles
						{
							componentName: 'divi/common',
							props: {
								property: 'font-family',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyTypography.fontFamily,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyTypography.fontSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'line-height',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyTypography.lineHeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'letter-spacing',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyTypography.letterSpacing,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-weight',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyTypography.fontWeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-style',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyTypography.fontStyle,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-transform',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyTypography.textTransform,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-decoration',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyTypography.textDecoration,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-align',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyTypography.textAlign,
							},
						},

						{
							componentName: 'divi/common',
							props: {
								property: 'align-self',
								selector: `${orderClass} .apply-filters__button`,
								attr: attrs?.module?.decoration?.applyAlignment,
							},
						},
						{
							componentName: "divi/common",
							props: {
								property: 'color',
								selector: `${orderClass} .apply-filters__button`,
								attr: attrs?.module?.decoration?.applyNormalColor,
							}
						},
						{
							componentName: "divi/common",
							props: {
								property: 'background-color',
								selector: `${orderClass} .apply-filters__button`,
								attr: attrs?.module?.decoration?.applyNormalBgColor,
							}
						},

						{
							componentName: "divi/common",
							props: {
								property: 'color',
								selector: `${orderClass} .apply-filters__button:hover`,
								attr: attrs?.module?.decoration?.applyHoverColor,
							}
						},
						{
							componentName: "divi/common",
							props: {
								property: 'background-color',
								selector: `${orderClass} .apply-filters__button:hover`,
								attr: attrs?.module?.decoration?.applyHoverBgColor,
							}
						},

						{
							componentName: 'divi/common',
							props: {
								property: 'border-style',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.style,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.width,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.color,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-top-style',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.styleTop,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-right-style',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.styleRight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-bottom-style',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.styleBottom,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-left-style',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.styleLeft,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-top-width',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.widthTop,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-right-width',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.widthRight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-bottom-width',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.widthBottom,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-left-width',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.widthLeft,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-top-color',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.colorTop,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-right-color',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.colorRight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-bottom-color',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.colorBottom,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-left-color',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.colorLeft,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-radius',
								selector: `${orderClass} .apply-filters__button`,
								attr: applyBorder.radius,
							},
						},

						{
							componentName: "divi/common",
							props: {
								property: "padding",
								selector: `${orderClass} .apply-filters__button`,
								attr: applySpacing.padding,
							},
						},

						{
							componentName: "divi/common",
							props: {
								property: "margin",
								selector: `${orderClass} .apply-filters__button`,
								attr: applySpacing.margin,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'max-width',
								selector: `${orderClass} .jet-filter-items-search`,
								attr: attrs?.module?.decoration?.searchItemsWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-family',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchItemsTypography.fontFamily,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchItemsTypography.fontSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'line-height',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchItemsTypography.lineHeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'letter-spacing',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchItemsTypography.letterSpacing,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-weight',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchItemsTypography.fontWeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-style',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchItemsTypography.fontStyle,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-transform',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchItemsTypography.textTransform,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-decoration',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchItemsTypography.textDecoration,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: attrs?.module?.decoration?.searchItemsColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: attrs?.module?.decoration?.searchItemsBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-style',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchInputBorder.style,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchInputBorder.width,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchInputBorder.color,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-radius',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchInputBorder.radius,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'padding',
								selector: `${orderClass} .jet-filter-items-search__input`,
								attr: searchInputPadding.padding,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin',
								selector: `${orderClass} .jet-filter-items-search`,
								attr: searchInputMargin.margin,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: `${orderClass} .jet-filter-items-search__clear`,
								attr: attrs?.module?.decoration?.searchRemoveNormalColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: `${orderClass} .jet-filter-items-search__clear:hover`,
								attr: attrs?.module?.decoration?.searchRemoveHoverColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: `${orderClass} .jet-filter-items-search__clear`,
								attr: attrs?.module?.decoration?.searchRemoveSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'right',
								selector: `${orderClass} .jet-filter-items-search__clear`,
								attr: attrs?.module?.decoration?.searchRemoveRightOffset,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-family',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonTypography.fontFamily,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonTypography.fontSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'line-height',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonTypography.lineHeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'letter-spacing',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonTypography.letterSpacing,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-weight',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonTypography.fontWeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-style',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonTypography.fontStyle,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-transform',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonTypography.textTransform,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-decoration',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonTypography.textDecoration,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: attrs?.module?.decoration?.moreLessButtonNormalColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: attrs?.module?.decoration?.moreLessButtonNormalBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: `${orderClass} .jet-filter-items-moreless__toggle:hover`,
								attr: attrs?.module?.decoration?.moreLessButtonHoverColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: `${orderClass} .jet-filter-items-moreless__toggle:hover`,
								attr: attrs?.module?.decoration?.moreLessButtonHoverBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${orderClass} .jet-filter-items-moreless__toggle:hover`,
								attr: attrs?.module?.decoration?.moreLessButtonHoverBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-style',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonBorder.style,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonBorder.width,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonBorder.color,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-radius',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonBorder.radius,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'padding',
								selector: `${orderClass} .jet-filter-items-moreless__toggle`,
								attr: moreLessButtonPadding.padding,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: `${orderClass} .jet-filter-items-moreless`,
								attr: attrs?.module?.decoration?.moreLessBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-style',
								selector: `${orderClass} .jet-filter-items-moreless`,
								attr: moreLessBorder.style,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: `${orderClass} .jet-filter-items-moreless`,
								attr: moreLessBorder.width,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${orderClass} .jet-filter-items-moreless`,
								attr: moreLessBorder.color,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-radius',
								selector: `${orderClass} .jet-filter-items-moreless`,
								attr: moreLessBorder.radius,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'padding',
								selector: `${orderClass} .jet-filter-items-moreless`,
								attr: moreLessPadding.padding,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-align',
								selector: `${orderClass} .jet-filter-items-moreless`,
								attr: attrs?.module?.decoration?.moreLessButtonAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'max-width',
								selector: `${orderClass} .jet-filter-items-dropdown`,
								attr: attrs?.module?.decoration?.dropdownWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-family',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelTypography.fontFamily,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelTypography.fontSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'line-height',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelTypography.lineHeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'letter-spacing',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelTypography.letterSpacing,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-weight',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelTypography.fontWeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-style',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelTypography.fontStyle,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-transform',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelTypography.textTransform,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-decoration',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelTypography.textDecoration,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: attrs?.module?.decoration?.dropdownLabelColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: attrs?.module?.decoration?.dropdownLabelBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-style',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelBorder.style,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelBorder.width,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelBorder.color,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-radius',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelBorder.radius,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'padding',
								selector: `${orderClass} .jet-filter-items-dropdown__label`,
								attr: dropdownLabelPadding.padding,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin',
								selector: `${orderClass} .jet-filter-items-dropdown__active`,
								attr: attrs?.module?.decoration?.dropdownActiveItemsOffset,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: attrs?.module?.decoration?.dropdownActiveItemsOffset,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-family',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemTypography.fontFamily,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemTypography.fontSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'line-height',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemTypography.lineHeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'letter-spacing',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemTypography.letterSpacing,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-weight',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemTypography.fontWeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-style',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemTypography.fontStyle,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-transform',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemTypography.textTransform,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-decoration',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemTypography.textDecoration,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: attrs?.module?.decoration?.dropdownActiveItemNormalColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: attrs?.module?.decoration?.dropdownActiveItemNormalBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item:hover`,
								attr: attrs?.module?.decoration?.dropdownActiveItemHoverColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item:hover`,
								attr: attrs?.module?.decoration?.dropdownActiveItemHoverBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item:hover`,
								attr: attrs?.module?.decoration?.dropdownActiveItemHoverBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-style',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemBorder.style,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemBorder.width,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemBorder.color,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-radius',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemBorder.radius,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'padding',
								selector: `${orderClass} .jet-filter-items-dropdown__active__item`,
								attr: dropdownActiveItemPadding.padding,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-family',
								selector: `${orderClass} .jet-filter-items-dropdown__n-selected`,
								attr: dropdownNSelectedTypography.fontFamily,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: `${orderClass} .jet-filter-items-dropdown__n-selected`,
								attr: dropdownNSelectedTypography.fontSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'line-height',
								selector: `${orderClass} .jet-filter-items-dropdown__n-selected`,
								attr: dropdownNSelectedTypography.lineHeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'letter-spacing',
								selector: `${orderClass} .jet-filter-items-dropdown__n-selected`,
								attr: dropdownNSelectedTypography.letterSpacing,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-weight',
								selector: `${orderClass} .jet-filter-items-dropdown__n-selected`,
								attr: dropdownNSelectedTypography.fontWeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-style',
								selector: `${orderClass} .jet-filter-items-dropdown__n-selected`,
								attr: dropdownNSelectedTypography.fontStyle,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-transform',
								selector: `${orderClass} .jet-filter-items-dropdown__n-selected`,
								attr: dropdownNSelectedTypography.textTransform,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-decoration',
								selector: `${orderClass} .jet-filter-items-dropdown__n-selected`,
								attr: dropdownNSelectedTypography.textDecoration,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: `${orderClass} .jet-filter-items-dropdown__n-selected`,
								attr: attrs?.module?.decoration?.dropdownNSelectedColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin',
								selector: `${orderClass} .jet-filter-items-dropdown__n-selected`,
								attr: dropdownNSelectedMargin.margin,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-top',
								selector: `${orderClass} .jet-filter-items-dropdown__body`,
								attr: attrs?.module?.decoration?.dropdownBodyOffset,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-style',
								selector: `${orderClass} .jet-filter-items-dropdown__body`,
								attr: dropdownBodyBorder.style,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: `${orderClass} .jet-filter-items-dropdown__body`,
								attr: dropdownBodyBorder.width,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${orderClass} .jet-filter-items-dropdown__body`,
								attr: dropdownBodyBorder.color,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-radius',
								selector: `${orderClass} .jet-filter-items-dropdown__body`,
								attr: dropdownBodyBorder.radius,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: `${orderClass} .jet-filter-items-dropdown__body`,
								attr: attrs?.module?.decoration?.dropdownBodyBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'padding',
								selector: `${orderClass} .jet-checkboxes-list-wrapper`,
								attr: dropdownBodyItemsPadding.padding,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: `${orderClass} .jet-filter-items-dropdown__footer`,
								attr: attrs?.module?.decoration?.dropdownFooterBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-style',
								selector: `${orderClass} .jet-filter-items-dropdown__footer`,
								attr: dropdownFooterBorder.style,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: `${orderClass} .jet-filter-items-dropdown__footer`,
								attr: dropdownFooterBorder.width,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${orderClass} .jet-filter-items-dropdown__footer`,
								attr: dropdownFooterBorder.color,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-radius',
								selector: `${orderClass} .jet-filter-items-dropdown__footer`,
								attr: dropdownFooterBorder.radius,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin',
								selector: `${orderClass} .jet-filter-items-dropdown__footer`,
								attr: dropdownFooterMargin.margin,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'padding',
								selector: `${orderClass} .jet-filter-items-dropdown__footer`,
								attr: dropdownFooterPadding.padding,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'justify-content',
								selector: `${orderClass} .jet-filter-items-dropdown__footer`,
								attr: attrs?.module?.decoration?.dropdownFooterAlignment,
							},
						},

					]
				},
			})}
		</StyleContainer>
	);
}

export {
	ModuleStyles,
};
