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

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

// Local dependencies.
import { ColorImageAttrs } from './types';
import {
	createBorderStyles,
	createSpacingStyles,
	createTypographyStyles,
	extractBorderAttrs,
	extractSpasingAttrs,
	extractTypographyAttrs,
} from '../../utils';

/**
 * Dynamic Module's style components.
 *
 * @since ??
 */
const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<ColorImageAttrs>): ReactElement => {
	const selectors = {
		listWrapper: `${orderClass} .jet-color-image-list-wrapper`,
		listItem: `${orderClass} .jet-color-image-list__row`,
		button: `${orderClass} .jet-color-image-list__button`,
		checkedButton: `${orderClass} .jet-color-image-list__input:checked ~ .jet-color-image-list__button`,
		label: `${orderClass} .jet-color-image-list__label`,
		decorator: `${orderClass} .jet-color-image-list__decorator`,
		decoratorSpan: `${orderClass} .jet-filter-row .jet-color-image-list__decorator > span`,
		checkedDecoratorSpan: `${orderClass} .jet-filter-row .jet-color-image-list__input:checked ~ .jet-color-image-list__button .jet-color-image-list__decorator > span`,
		filterLabel: `${orderClass} .jet-filter-label`,
		applyButton: `${orderClass} .apply-filters__button`,
		applyButtonHover: `${orderClass} .apply-filters__button:hover`,
		counter: `${orderClass} .jet-filters-counter`,
	};

	const itemTypography = extractTypographyAttrs(attrs?.module?.decoration?.itemTypography);
	const itemTypographyStyles = createTypographyStyles(selectors.label, itemTypography);

	const itemSpacing = extractSpasingAttrs(attrs?.module?.decoration?.itemSpacing);
	const itemSpacingStyles = createSpacingStyles(`${orderClass} .jet-filter-row .jet-color-image-list__button`, itemSpacing);

	const itemBorder = extractBorderAttrs(attrs?.module?.decoration?.itemBorder);
	const itemBorderStyles = createBorderStyles(`${orderClass} .jet-filter-row .jet-color-image-list__button`, itemBorder);

	const decoratorBorder = extractBorderAttrs(attrs?.module?.decoration?.colorImageBorder);
	const decoratorBorderStyles = createBorderStyles(selectors.decoratorSpan, decoratorBorder);

	const labelTypography = extractTypographyAttrs(attrs?.module?.decoration?.labelTypography);
	const labelTypographyStyles = createTypographyStyles(selectors.filterLabel, labelTypography);

	const labelSpacing = extractSpasingAttrs(attrs?.module?.decoration?.labelSpacing);
	const labelSpacingStyles = createSpacingStyles(selectors.filterLabel, labelSpacing);


	const applySpacing = extractSpasingAttrs(attrs?.module?.decoration?.applySpacing);
	const applySpacingStyles = createSpacingStyles(selectors.applyButton, applySpacing);

	const applyBorder = extractBorderAttrs(attrs?.module?.decoration?.applyBorder);
	const applyBorderStyles = createBorderStyles(selectors.applyButton, applyBorder);

	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 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);

	const counterTypography = extractTypographyAttrs(attrs?.module?.decoration?.counterTypography);
	const counterTypographyStyles = createTypographyStyles(selectors.counter, counterTypography);

	const counterSpacing = extractSpasingAttrs(attrs?.module?.decoration?.counterSpacing);
	const counterSpacingStyles = createSpacingStyles(selectors.counter, counterSpacing);

	const counterBorder = extractBorderAttrs(attrs?.module?.decoration?.counterBorder);
	const counterBorderStyles = createBorderStyles(selectors.counter, counterBorder);

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
					advancedStyles: [
						...itemTypographyStyles,
						...itemSpacingStyles,
						...itemBorderStyles,
						...decoratorBorderStyles,
						...labelTypographyStyles,
						...labelSpacingStyles,
						...applySpacingStyles,
						...applyBorderStyles,
						...searchInputBorderStyles,
						...moreLessButtonBorderStyles,
						...moreLessBorderStyles,
						...dropdownLabelBorderStyles,
						...dropdownActiveItemBorderStyles,
						...dropdownBodyBorderStyles,
						...dropdownFooterBorderStyles,
						...counterTypographyStyles,
						...counterSpacingStyles,
						...counterBorderStyles,
						{
							componentName: 'divi/common',
							props: {
								property: 'display',
								selector: selectors.listItem,
								attr: attrs?.module?.decoration?.filtersPosition,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-left',
								selector: selectors.listItem,
								attr: attrs?.module?.decoration?.filtersSpaceBetweenHorizontal,
								declarationFunction: ({ attrValue }) =>
									attrValue ? `calc(${attrValue} / 2)` : '',
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-right',
								selector: selectors.listItem,
								attr: attrs?.module?.decoration?.filtersSpaceBetweenHorizontal,
								declarationFunction: ({ attrValue }) =>
									attrValue ? `calc(${attrValue} / 2)` : '',
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-left',
								selector: selectors.listWrapper,
								attr: attrs?.module?.decoration?.filtersSpaceBetweenHorizontal,
								declarationFunction: ({ attrValue }) =>
									attrValue ? `calc(-${attrValue} / 2)` : '',
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-right',
								selector: selectors.listWrapper,
								attr: attrs?.module?.decoration?.filtersSpaceBetweenHorizontal,
								declarationFunction: ({ attrValue }) =>
									attrValue ? `calc(-${attrValue} / 2)` : '',
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-bottom',
								selector: selectors.listItem,
								attr: attrs?.module?.decoration?.filtersSpaceBetweenVertical,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-align',
								selector: selectors.listWrapper,
								attr: attrs?.module?.decoration?.filtersListAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.button,
								attr: attrs?.module?.decoration?.itemNormalColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.button,
								attr: attrs?.module?.decoration?.itemNormalBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.checkedButton,
								attr: attrs?.module?.decoration?.itemCheckedColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.checkedButton,
								attr: attrs?.module?.decoration?.itemCheckedBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.checkedButton,
								attr: attrs?.module?.decoration?.itemCheckedBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: `${selectors.decorator} .jet-color-image-list__color`,
								attr: attrs?.module?.decoration?.colorImageSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'height',
								selector: `${selectors.decorator} .jet-color-image-list__color`,
								attr: attrs?.module?.decoration?.colorImageSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: `${selectors.decorator} .jet-color-image-list__image`,
								attr: attrs?.module?.decoration?.colorImageSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-left',
								selector: selectors.label,
								attr: attrs?.module?.decoration?.colorImageLabelOffset,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.checkedDecoratorSpan,
								attr: attrs?.module?.decoration?.colorImageCheckedBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-align',
								selector: selectors.filterLabel,
								attr: attrs?.module?.decoration?.labelAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.filterLabel,
								attr: attrs?.module?.decoration?.labelColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.applyButton,
								attr: attrs?.module?.decoration?.applyNormalColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.applyButton,
								attr: attrs?.module?.decoration?.applyNormalBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.applyButtonHover,
								attr: attrs?.module?.decoration?.applyHoverColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.applyButtonHover,
								attr: attrs?.module?.decoration?.applyHoverBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.applyButtonHover,
								attr: attrs?.module?.decoration?.applyHoverBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'align-self',
								selector: selectors.applyButton,
								attr: attrs?.module?.decoration?.applyAlignment,
							},
						},
						{
							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: '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: '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: '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: '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: '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: 'background-color', selector: `${orderClass} .jet-filter-items-dropdown__body`, attr: attrs?.module?.decoration?.dropdownBodyBackgroundColor } },
						{ componentName: 'divi/common', props: { property: 'padding', selector: selectors.listWrapper, 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: '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 } },

						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.counter,
								attr: attrs?.module?.decoration?.counterColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.counter,
								attr: attrs?.module?.decoration?.counterBgColor,
							},
						},
					],
				},
			})}
		</StyleContainer>
	);
}

export {
	ModuleStyles,
};
