<?php
/**
 * WS Forms element.
 *
 * @package BricksExtras
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * WS Forms element class.
 */
class X_Ws_Forms extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xwsforms';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-layout-media-overlay-alt-2';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';

	/**
	 * Constructor.
	 *
	 * @param mixed $element Element data.
	 */
	public function __construct( $element = null ) {

		if ( bricks_is_builder() ) {
			$this->scripts = array( 'wsf_form_init' );
		}

		parent::__construct( $element );
	}


	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html( 'WS Forms' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'ws', 'forms', 'form' );
	}

	/**
	 * Set control groups.
	 */
	public function set_control_groups() {

		$this->control_groups['general_group'] = array(
			'title' => esc_html__( 'Form wide colors', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['inputs_group'] = array(
			'title' => esc_html__( 'Input', 'bricks' ) . ' / ' . esc_html__( 'Label', 'bricks' ) . ' / ' . esc_html__( 'Help', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['prefix_group'] = array(
			'title' => esc_html__( 'Prefix', 'bricks' ) . ' / ' . esc_html__( 'Suffix', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['submit_group'] = array(
			'title' => esc_html__( 'Buttons', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['checkbox_group'] = array(
			'title' => esc_html__( 'Checkbox', 'bricks' ) . ' / ' . esc_html__( 'Radio', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['messages_group'] = array(
			'title' => esc_html__( 'Messages', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['phone_group'] = array(
			'title' => esc_html__( 'Phone number', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['repeatable_group'] = array(
			'title' => esc_html__( 'Repeatable sections', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['range_group'] = array(
			'title' => esc_html__( 'Range Slider', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['meter_group'] = array(
			'title' => esc_html__( 'Meter', 'bricksextras' ) . ' / ' . esc_html__( 'Progress Bar', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['tab_group'] = array(
			'title' => esc_html__( 'Tabs', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['tab_content_group'] = array(
			'title' => esc_html__( 'Tab Content', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['file_upload_group'] = array(
			'title' => esc_html__( 'File Upload', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['password_group'] = array(
			'title' => esc_html__( 'Password', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['legal_group'] = array(
			'title' => esc_html__( 'Legal', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['star_rating_group'] = array(
			'title' => esc_html__( 'Rating', 'bricks' ),
			'tab'   => 'content',
		);
	}

	/**
	 * Set element controls.
	 */
	public function set_controls() {

		// Remove default '_typography'.
		unset( $this->controls['_typography'] );

		// support form styler.
		$form_styler_enabled = method_exists( '\WS_Form_Common', 'styler_enabled' ) && WS_Form_Common::styler_enabled();

		$this->controls['typography'] = array(
			'tab'   => 'style',
			'group' => '_typography',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.wsf-form',
				),
			),
		);

		$this->controls['typographyh1'] = array(
			'tab'   => 'style',
			'group' => '_typography',
			'label' => esc_html__( 'Typography', 'bricks' ) . ' (h1)',
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.wsf-form h1',
				),
			),
		);

		$this->controls['typographyh2'] = array(
			'tab'   => 'style',
			'group' => '_typography',
			'label' => esc_html__( 'Typography', 'bricks' ) . ' (h2)',
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.wsf-form h2',
				),
			),
		);

		$this->controls['typographyh3'] = array(
			'tab'   => 'style',
			'group' => '_typography',
			'label' => esc_html__( 'Typography', 'bricks' ) . ' (h3)',
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.wsf-form h3',
				),
			),
		);

		$this->controls['typographyh4'] = array(
			'tab'   => 'style',
			'group' => '_typography',
			'label' => esc_html__( 'Typography', 'bricks' ) . ' (h4)',
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.wsf-form h4',
				),
			),
		);

		$this->controls['typographyh5'] = array(
			'tab'   => 'style',
			'group' => '_typography',
			'label' => esc_html__( 'Typography', 'bricks' ) . ' (h5)',
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.wsf-form h5',
				),
			),
		);

		$this->controls['typographyh6'] = array(
			'tab'   => 'style',
			'group' => '_typography',
			'label' => esc_html__( 'Typography', 'bricks' ) . ' (h6)',
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.wsf-form h6',
				),
			),
		);

		$form_options = array();

		if ( method_exists( 'WS_Form_Common', 'get_forms_array' ) ) {
			$form_options = WS_Form_Common::get_forms_array( false );
		}

		$this->controls['formSource'] = array(
			'tab'    => 'content',
			'label'  => esc_html__( 'Add form ID dynamically', 'bricksextras' ),
			'type'   => 'checkbox',
			'inline' => true,
		);

		$this->controls['formSelect'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Select form', 'bricksextras' ),
			'type'        => 'select',
			'options'     => $form_options,
			'placeholder' => esc_html__( 'Select form', 'bricksextras' ),
			'clearable'   => false,
			'required'    => array( 'formSource', '!=', true ),
		);

		$this->controls['formID'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Form ID', 'bricks' ),
			'type'     => 'text',
			'required' => array( 'formSource', '=', true ),
		);

		$inputs_array = array(
			'input[type="date"].wsf-field',
			'input[type="datetime-local"].wsf-field',
			'input[type="month"].wsf-field',
			'input[type="password"].wsf-field',
			'input[type="search"].wsf-field',
			'input[type="time"].wsf-field',
			'input[type="week"].wsf-field',
			'input[type="email"].wsf-field',
			'input[type="number"].wsf-field',
			'input[type="tel"].wsf-field',
			'input[type="text"].wsf-field',
			'input[type="text"].wsf-field:not(.minicolors > input)',
			'input[type="url"].wsf-field',
			'select.wsf-field',
			'select.wsf-field:not([multiple]):not([size])',
			'textarea.wsf-field',
			'[data-wsf-legal].wsf-field',
		);

		$placeholder_selectors = array(
			'input[type=date].wsf-field::placeholder',
			'input[type=datetime-local].wsf-field::placeholder',
			'input[type=file].wsf-field::placeholder',
			'input[type=month].wsf-field::placeholder',
			'input[type=password].wsf-field::placeholder',
			'input[type=search].wsf-field::placeholder',
			'input[type=time].wsf-field::placeholder',
			'input[type=week].wsf-field::placeholder',
			'input[type=email].wsf-field::placeholder',
			'input[type=number].wsf-field::placeholder',
			'input[type=tel].wsf-field::placeholder',
			'input[type=text].wsf-field::placeholder',
			'input[type=url].wsf-field::placeholder',
			'select.wsf-field::placeholder',
			'textarea.wsf-field::placeholder',
		);

		$default_array = array(
			'.wsf-form',
			'.wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a',
			'.wsf-form ul.wsf-group-tabs > li > a',
			'ul.wsf-group-tabs.wsf-steps > li.wsf-tab-active ~ li > a:not(.wsf-tab-disabled):before',
			'.wsf-input-group-prepend, .wsf-input-group-append',
			'input[type=radio].wsf-field + label.wsf-label',
			'input[type=checkbox].wsf-field + label.wsf-label',
			'.xdsoft_datetimepicker .xdsoft_label',
			'.xdsoft_datetimepicker .xdsoft_calendar td',
			'.xdsoft_datetimepicker .xdsoft_calendar th',
			'.wsf-select2-dropdown .select2-results .select2-results__option',
			'select.wsf-field ~ .select2-container .select2-search--inline .select2-search__field',
			'select.wsf-field ~ .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover',
			'select.wsf-field ~ .select2-container .select2-selection--single .select2-selection__rendered',
			'select.wsf-field ~ .select2-container .select2-selection--multiple .select2-selection__rendered',
			'select.wsf-field ~ .select2-container .select2-selection--single .select2-selection__placeholder',
			'select.wsf-field ~ .select2-container .select2-selection--multiple .select2-selection__placeholder',
			'select.wsf-field ~ .select2-container .select2-selection--single .select2-selection__placeholder',
			'select.wsf-field ~ .select2-container .select2-selection--multiple .select2-selection__placeholder',
			'.wsf-select2-dropdown .select2-search--dropdown .select2-search__field',
			'.wsf-select2-dropdown .select2-results .select2-results__option',
			'.wsf-help',
			'button.wsf-button',
			'.wsf-field-wrapper[data-type=range] input[type=range].wsf-field + datalist option',
			'.wsf-field-wrapper[data-type=price_range] input[type=range].wsf-field + datalist option',
		);

		$inputs = '';

		$this->controls['generalColorSep'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'label'       => esc_html__( 'Form wide colors', 'bricksextras' ),
			'description' => esc_html__( 'Used in multiple places across the form, will override all WS Form global styles', 'bricksextras' ),
			'type'        => 'separator',
		);

		$default_color_css = \BricksExtras\Helpers::do_css_rules( 'color', $default_array, true );
		$default_color_css = array_merge( $default_color_css, \BricksExtras\Helpers::do_css_rules( 'color', $inputs_array, true ) );

		$extra_default_styles = array(
			array(
				'property' => 'border-color',
				'selector' => '.xdsoft_datetimepicker .xdsoft_calendar th',
			),
		);

		$default_color_css = array_merge( $default_color_css, $extra_default_styles );

		$this->controls['generaldefaultColor'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'type'        => 'color',
			'units'       => true,
			'label'       => esc_html__( 'Default color', 'bricksextras' ),
			'description' => esc_html__( 'Labels and field values', 'bricksextras' ),
			'css'         => $default_color_css,
		);

		$inverted_color_css = array(
			array(
				'property' => 'color',
				'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li > a:before',
			),
			array(
				'property' => 'background-color',
				'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li.wsf-tab-active > a:before',
			),
			array(
				'property' => 'background-color',
				'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li.wsf-tab-active ~ li > a:before',
			),
			array(
				'property' => 'color',
				'selector' => '[data-wsf-tooltip]:after',
			),
			array(
				'property' => 'color',
				'selector' => 'input[type=checkbox].wsf-field.wsf-button:checked + label.wsf-label,
			   input[type=radio].wsf-field.wsf-button:checked + label.wsf-label',
			),
			array(
				'property' => 'color',
				'selector' => '.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current',
			),
			array(
				'property' => 'color',
				'selector' => '.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover',
			),
			array(
				'property' => 'color',
				'selector' => '.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current',
			),
			array(
				'property' => 'color',
				'selector' => '.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current',
			),
			array(
				'property' => 'color',
				'selector' => '.xdsoft_datetimepicker .xdsoft_calendar td:hover',
			),
			array(
				'property' => 'color',
				'selector' => '.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-primary',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-secondary',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-success',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-danger',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-primary:hover',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-primary:focus',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-success:hover',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-success:focus',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-information:hover',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-information:focus',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-warning:hover',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-warning:focus',
			),
			array(
				'property' => 'color',
				'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-danger:hover',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=radio].wsf-field + label.wsf-label:before',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=checkbox].wsf-field + label.wsf-label:before',
			),
			array(
				'property' => 'background-color',
				'selector' => '.xdsoft_datetimepicker',
			),
			array(
				'property' => 'background-color',
				'selector' => '.xdsoft_datetimepicker .xdsoft_label',
			),

			array(
				'property' => 'color',
				'selector' => '.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current',
			),
			array(
				'property'  => 'color',
				'selector'  => '.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current',
				'important' => true,
			),
			array(
				'property' => 'background-color',
				'selector' => '.wsf-groups input[type=radio].wsf-field:checked + label.wsf-label:after',
			),
			array(
				'property' => 'background-color',
				'selector' => '.wsf-groups input[type=checkbox].wsf-field:checked + label.wsf-label:after',
			),
			array(
				'property' => 'background-color',
				'selector' => 'select.wsf-field ~ .select2-container .select2-selection--single',
			),
			array(
				'property' => 'background-color',
				'selector' => 'select.wsf-field ~ .select2-container .select2-selection--multiple',
			),
		);

		if ( $form_styler_enabled ) {

			$inverted_color_css_styler = array(
				array(
					'property' => 'background-color',
					'selector' => '.wsf-form input[type=radio].wsf-field',
				),
				array(
					'property' => 'background-color',
					'selector' => '.wsf-form input[type=checkbox].wsf-field',
				),

			);

			$inverted_color_css = array_merge( $inverted_color_css, $inverted_color_css_styler );

		}

		$inverted_color_css = array_merge( $inverted_color_css, \BricksExtras\Helpers::do_css_rules( 'background-color', $inputs_array, true ) );

		$this->controls['generaldefaultInvertedColor'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'type'        => 'color',
			'units'       => true,
			'label'       => esc_html__( 'Inverted color', 'bricksextras' ),
			'description' => esc_html__( 'Field backgrounds and button text', 'bricksextras' ),
			'css'         => $inverted_color_css,
		);

		$light_color_css = array(
			array(
				'property' => 'color',
				'selector' => '.wsf-form ul.wsf-group-tabs > li > a.wsf-tab-disabled',
			),
			array(
				'property' => 'color',
				'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li > a.wsf-tab-disabled:before',
			),
			array(
				'property' => 'color',
				'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li.wsf-tab-active ~ li > a.wsf-tab-disabled:before',
			),
			array(
				'property' => 'color',
				'selector' => 'input[type=text].wsf-field ~ .dropzone .dz-message',
			),
			array(
				'property' => '--wsf-field-color-placeholder',
				'selector' => 'input[type=text].wsf-field ~ .dropzone .dz-message',
			),
			array(
				'property' => 'color',
				'selector' => 'select.wsf-field ~ .select2-container .select2-search--inline .select2-search__field::placeholder',
			),

		);

		$light_colors = array_merge( $light_color_css, \BricksExtras\Helpers::do_css_rules( 'color', $placeholder_selectors, true ) );

		$this->controls['generalLightColor'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'type'        => 'color',
			'units'       => true,
			'label'       => esc_html__( 'Light color', 'bricks' ),
			'description' => esc_html__( 'Placeholders, help text, and disabled field values.', 'bricksextras' ),
			'css'         => $light_colors,
		);

		$lighter_color_css = array(
			array(
				'property' => 'border-color',
				'selector' => 'button.wsf-button',
			),
			array(
				'property' => 'background-color',
				'selector' => 'button.wsf-button',
			),
			array(
				'property' => 'border-color',
				'selector' => 'button.wsf-button:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'button.wsf-button:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'ul.wsf-group-tabs.wsf-steps > li.wsf-tab-active ~ li > a:after',
			),
			array(
				'property' => 'border-color',
				'selector' => 'ul.wsf-group-tabs.wsf-steps > li.wsf-tab-active ~ li > a:before',
			),
			array(
				'property' => 'border-color',
				'selector' => '.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone',
			),

		);

		$lighter_color_css = array_merge( $lighter_color_css, \BricksExtras\Helpers::do_css_rules( 'border-color', $inputs_array, true ) );

		$this->controls['generalLighterColor'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'type'        => 'color',
			'units'       => true,
			'label'       => esc_html__( 'Lighter Color', 'bricksextras' ),
			'description' => esc_html__( 'Field borders and buttons.', 'bricksextras' ),
			'css'         => $lighter_color_css,
		);

		$lightest_color_css = array(
			array(
				'property' => 'background-color',
				'selector' => 'input[type=file].wsf-field::file-selector-button',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=file].wsf-field::-webkit-file-upload-button',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=text].wsf-field ~ .dropzone .wsf-progress',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=text].wsf-field:disabled ~ .dropzone',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=text].wsf-field:disabled ~ canvas',
			),
			array(
				'property' => 'background-color',
				'selector' => 'meter.wsf-meter::-webkit-meter-bar',
			),
			array(
				'property' => 'background-color',
				'selector' => 'progress.wsf-progress[value]',
			),
			array(
				'property' => 'background-color',
				'selector' => 'progress.wsf-progress[value]::-webkit-progress-bar',
			),
			array(
				'property' => 'background-color',
				'selector' => '.wsf-alert',
			),
			array(
				'property' => 'background-color',
				'selector' => '.wsf-input-group-prepend',
			),
			array(
				'property' => 'background-color',
				'selector' => '.wsf-input-group-append',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=date].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=datetime-local].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=file].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=month].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=password].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=search].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=time].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=week].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=email].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=number].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=tel].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=text].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=url].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=tel].wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'select.wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'textarea.wsf-field:disabled',
			),
			array(
				'property' => 'background-color',
				'selector' => 'select.wsf-field ~ .select2-container--default.select2-container--disabled .select2-selection--single,select.wsf-field ~ .select2-container--default.select2-container--disabled .select2-selection--multiple',
			),
			array(
				'property' => 'background-color',
				'selector' => 'select.wsf-field ~ .select2-container--default .select2-selection--multiple .select2-selection__choice',
			),
			array(
				'property' => 'background-color',
				'selector' => '.wsf-select2-dropdown .select2-results .select2-results__option[aria-selected=true]',
			),
			array(
				'property' => 'background-color',
				'selector' => '.wsf-select2-dropdown .select2-results .select2-results__option[aria-selected=true]',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=checkbox].wsf-field:disabled + label.wsf-label:before',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=radio].wsf-field:disabled + label.wsf-label:before',
			),
			array(
				'property' => 'background-color',
				'selector' => '.xdsoft_datetimepicker .xdsoft_calendar td,body .xdsoft_datetimepicker .xdsoft_calendar th',
			),
			array(
				'property' => '--wsf-color-upper-track',
				'selector' => 'input[type=range].wsf-field',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=range].wsf-field::-webkit-slider-runnable-track',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=range].wsf-field::-moz-range-track',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=range].wsf-field::-ms-track',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=range].wsf-field::-ms-fill-lower,input[type=range].wsf-field::-ms-fill-upper',
			),
			array(
				'property' => 'background-color',
				'selector' => '.xdsoft_datetimepicker .xdsoft_calendar th',
			),

		);

		$this->controls['generalLightestColor'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'type'        => 'color',
			'units'       => true,
			'label'       => esc_html__( 'Lightest color', 'bricksextras' ),
			'description' => esc_html__( 'Range slider backgrounds, progress bar backgrounds, and disabled field backgrounds.', 'bricksextras' ),
			'css'         => $lightest_color_css,
		);

		$general_primary_color_css = array(
			array(
				'property' => 'border-color',
				'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li > a:before',
			),
			array(
				'property' => 'color',
				'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li.wsf-tab-active > a:before',
			),
			array(
				'property' => 'border-color',
				'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li.wsf-tab-active > a:before',
			),
			array(
				'property' => 'background-color',
				'selector' => 'button.wsf-button.wsf-button-primary',
			),
			array(
				'property' => 'border-color',
				'selector' => 'button.wsf-button.wsf-button-primary',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=radio].wsf-field:checked + label.wsf-label:before',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=radio].wsf-field:checked + label.wsf-label:before',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=radio].wsf-field:focus + label.wsf-label:before',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=checkbox].wsf-field:checked + label.wsf-label:before',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=checkbox].wsf-field:checked + label.wsf-label:before',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=checkbox].wsf-field:focus + label.wsf-label:before',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=date].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=datetime-local].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=file].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=month].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=password].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=search].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=time].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=week].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=email].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=number].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=tel].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=text].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'input[type=url].wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'select.wsf-field:focus',
			),
			array(
				'property' => 'border-color',
				'selector' => 'textarea.wsf-field:focus',
			),
			array(
				'property'  => 'background-color',
				'selector'  => '.xdsoft_datetimepicker .xdsoft_calendar td:hover',
				'important' => true,
			),
			array(
				'property'  => 'background-color',
				'selector'  => '.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover',
				'important' => true,
			),
			array(
				'property'  => 'background-color',
				'selector'  => '.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current',
				'important' => true,
			),
			array(
				'property'  => 'background-color',
				'selector'  => '.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover',
				'important' => true,
			),

			array(
				'property'  => 'background-color',
				'selector'  => '.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current',
				'important' => true,
			),
			array(
				'property'  => 'background-color',
				'selector'  => '.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current',
				'important' => true,
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=range].wsf-field[data-fill-lower-track]::-ms-fill-lower',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=range].wsf-field::-webkit-slider-thumb',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=range].wsf-field::-moz-range-thumb',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=range].wsf-field::-ms-thumb',
			),
			array(
				'property' => 'border-color',
				'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li > a:not(.wsf-tab-disabled):focus:before',
			),
			array(
				'property' => 'border-color',
				'selector' => 'select.wsf-field ~ .select2-container--default.select2-container--focus:not(.select2-container--disabled) .select2-selection--single',
			),
			array(
				'property' => 'border-color',
				'selector' => 'select.wsf-field ~ .select2-container--default.select2-container--focus:not(.select2-container--disabled) .select2-selection--multiple',
			),
			array(
				'property' => 'border-color',
				'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li > a:before',
			),
			array(
				'property' => 'background-color',
				'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li > a:after',
			),
			array(
				'property' => 'background-color',
				'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li > a:before',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=range].wsf-field[data-fill-lower-track]::-ms-fill-lower',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=range].wsf-field::-webkit-slider-thumb',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=range].wsf-field::-moz-range-thumb',
			),
			array(
				'property' => 'background-color',
				'selector' => 'input[type=range].wsf-field::-ms-thumb',
			),
			array(
				'property' => '--wsf-color-lower-track',
				'selector' => 'input[type=range].wsf-field',
			),
			array(
				'property' => 'background-color',
				'selector' => 'progress.wsf-progress[value]::-webkit-progress-value',
			),
			array(
				'property' => 'background-color',
				'selector' => 'progress.wsf-progress[value]::-moz-progress-bar',
			),
			array(
				'property' => 'background-color',
				'selector' => 'progress.wsf-progress[value]::-ms-fill',
			),

		);

		if ( $form_styler_enabled ) {

			$general_primary_color_styler = array(
				array(
					'property' => 'background-color',
					'selector' => 'input[type=checkbox].wsf-field:checked',
				),
				array(
					'property' => 'background-color',
					'selector' => 'input[type=radio].wsf-field:checked',
				),
			);

			$general_primary_color_css = array_merge( $general_primary_color_css, $general_primary_color_styler );

		}

		$this->controls['generalPrimaryColor'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'type'        => 'color',
			'units'       => true,
			'label'       => esc_html__( 'Primary color', 'bricks' ),
			'description' => esc_html__( 'Checkboxes, radios, range sliders, progress bars, and submit buttons.', 'bricksextras' ),
			'css'         => $general_primary_color_css,
		);

		$this->controls['generalSecondaryColor'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'type'        => 'color',
			'units'       => true,
			'label'       => esc_html__( 'Secondary color', 'bricks' ),
			'description' => esc_html__( 'Secondary elements such as a reset button.', 'bricksextras' ),
			'css'         => array(
				array(
					'property' => 'border-color',
					'selector' => 'input[type=date].wsf-field',
				),
				array(
					'property' => 'border-color',
					'selector' => 'button.wsf-button.wsf-button-secondary',
				),
				array(
					'property' => 'background-color',
					'selector' => 'button.wsf-button.wsf-button-secondary',
				),
				array(
					'property' => 'border-color',
					'selector' => 'button.wsf-button.wsf-button-secondary:disabled',
				),
				array(
					'property' => 'background-color',
					'selector' => 'button.wsf-button.wsf-button-secondary:disabled',
				),
				array(
					'property' => 'border-color',
					'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-secondary',
				),
				array(
					'property' => 'color',
					'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-secondary',
				),

				array(
					'property' => 'border-color',
					'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-secondary:disabled',
				),
				array(
					'property' => 'color',
					'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-secondary:disabled',
				),
				array(
					'property' => 'background-color',
					'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-secondary:focus',
				),
				array(
					'property' => 'border-color',
					'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-secondary:focus',
				),
				array(
					'property' => 'color',
					'selector' => 'wsf-text-secondary collator_asort',
				),

			),
		);

		$this->controls['generalSuccessColor'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'type'        => 'color',
			'units'       => true,
			'label'       => esc_html__( 'Success color', 'bricks' ),
			'description' => esc_html__( 'Completed progress bars, save buttons, and success messages.', 'bricksextras' ),
			'css'         => array(
				array(
					'property' => 'border-color',
					'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-steps-success > li > a:before',
				),
				array(
					'property' => 'background-color',
					'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-steps-success > li > a:before',
				),
				array(
					'property' => 'background-color',
					'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-steps-success > li > a:after',
				),
				array(
					'property' => 'border-color',
					'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-steps-success > li > a:not(.wsf-tab-disabled):focus:before',
				),
				array(
					'property' => 'color',
					'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-steps-success > li.wsf-tab-active > a:before',
				),
				array(
					'property' => 'color',
					'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-steps-success > li.wsf-tab-active > a:before',
				),
				array(
					'property' => 'background-color',
					'selector' => 'input[type=text].wsf-field ~ .dropzone .wsf-progress.wsf-progress-success .wsf-upload',
				),
				array(
					'property' => 'background-color',
					'selector' => 'progress.wsf-progress.wsf-progress-success[value]::-webkit-progress-value',
				),
				array(
					'property' => 'background-color',
					'selector' => 'progress.wsf-progress.wsf-progress-success[value]::-moz-progress-bar',
				),
				array(
					'property' => 'background-color',
					'selector' => 'progress.wsf-progress.wsf-progress-success[value]::-ms-fill',
				),
				array(
					'property' => 'background-color',
					'selector' => 'meter.wsf-meter::-webkit-meter-optimum-value',
				),
				array(
					'property' => 'background-color',
					'selector' => 'meter.wsf-meter:-moz-meter-optimum::-moz-meter-bar',
				),
				array(
					'property' => 'background-color',
					'selector' => 'button.wsf-button.wsf-button-success',
				),
				array(
					'property' => 'border-color',
					'selector' => 'button.wsf-button.wsf-button-success',
				),

				array(
					'property' => 'background-color',
					'selector' => 'button.wsf-button.wsf-button-success:disabled',
				),
				array(
					'property' => 'border-color',
					'selector' => 'button.wsf-button.wsf-button-success:disabled',
				),

				array(
					'property' => 'border-color',
					'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-success:disabled',
				),
				array(
					'property' => 'color',
					'selector' => 'button.wsf-button.wsf-button-inverted.wsf-button-success:disabled',
				),
				array(
					'property' => 'color',
					'selector' => '.wsf-text-success',
				),
				array(
					'property' => 'background-color',
					'selector' => '.wsf-alert.wsf-alert-success',
				),
				array(
					'property' => 'border-color',
					'selector' => '.wsf-alert.wsf-alert-success',
				),
				array(
					'property' => 'background-color',
					'selector' => 'button.wsf-button.wsf-button-success',
				),

			),
		);

		$this->controls['generalInformationBg'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'type'        => 'color',
			'units'       => true,
			'label'       => esc_html__( 'Information', 'bricksextras' ),
			'description' => esc_html__( 'Information messages', 'bricksextras' ),
			'css'         => array(
				array(
					'property' => 'background-color',
					'selector' => '.wsf-alert.wsf-alert-information',
				),
				array(
					'property' => 'border-color',
					'selector' => '.wsf-alert.wsf-alert-information',
				),
				array(
					'property' => 'background-color',
					'selector' => 'button.wsf-button.wsf-button-information',
				),
				array(
					'property' => 'border-color',
					'selector' => 'button.wsf-button.wsf-button-information',
				),

			),
		);

		$this->controls['generalWarningColor'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'type'        => 'color',
			'units'       => true,
			'label'       => esc_html__( 'Warning color', 'bricks' ),
			'description' => esc_html__( 'Warning messages', 'bricksextras' ),
			'css'         => array(
				array(
					'property' => 'border-color',
					'selector' => 'input[type=date].wsf-field',
				),
				array(
					'property' => 'background-color',
					'selector' => 'button.wsf-button.wsf-button-warning',
				),
				array(
					'property' => 'border-color',
					'selector' => 'button.wsf-button.wsf-button-warning',
				),
				array(
					'property' => 'background-color',
					'selector' => '.wsf-alert.wsf-alert-warning',
				),
				array(
					'property' => 'border-color',
					'selector' => '.wsf-alert.wsf-alert-warning',
				),
			),
		);

		$this->controls['generalDangerColor'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'type'        => 'color',
			'units'       => true,
			'label'       => esc_html__( 'Danger color', 'bricks' ),
			'description' => esc_html__( 'Required field labels, invalid field borders, invalid feedback, remove repeatable section buttons, and danger messages.', 'bricksextras' ),
			'css'         => array(
				array(
					'property' => 'border-color',
					'selector' => 'input[type=date].wsf-field',
				),
				array(
					'property' => 'color',
					'selector' => '.wsf-invalid-feedback',
				),
				array(
					'property' => 'background-color',
					'selector' => 'button.wsf-button.wsf-button-danger',
				),
				array(
					'property' => 'border-color',
					'selector' => 'button.wsf-button.wsf-button-danger',
				),
				array(
					'property' => 'background-color',
					'selector' => '.wsf-alert.wsf-alert-danger',
				),
				array(
					'property' => 'border-color',
					'selector' => '.wsf-alert.wsf-alert-danger',
				),

			),
		);

		$this->controls['generalBorderColor'] = array(
			'tab'   => 'content',
			'group' => 'general_group',
			'type'  => 'color',
			'units' => true,
			'label' => esc_html__( 'Border color', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'border-color',
					'selector' => 'input[type=date].wsf-field, 
								   input[type=datetime-local].wsf-field, 
								   input[type=file].wsf-field, 
								   input[type=month].wsf-field, 
								   input[type=password].wsf-field, 
								   input[type=search].wsf-field, 
								   input[type=time].wsf-field, 
								   input[type=week].wsf-field, 
								   input[type=email].wsf-field, 
								   input[type=number].wsf-field, 
								   input[type=tel].wsf-field, 
								   input[type=text].wsf-field, 
								   input[type=url].wsf-field, 
								   select.wsf-field, textarea.wsf-field',
				),
				array(
					'property' => 'border-top-color',
					'selector' => '.wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a',
				),
				array(
					'property' => 'border-left-color',
					'selector' => '.wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a',
				),
				array(
					'property' => 'border-right-color',
					'selector' => '.wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a',
				),
				array(
					'property' => 'border-bottom-color',
					'selector' => '.wsf-form ul.wsf-group-tabs',
				),

			),
		);

		$this->controls['focusBoxShadow'] = array(
			'tab'   => 'content',
			'group' => 'general_group',
			'type'  => 'color',
			'label' => esc_html__( 'Focus shadow color', 'bricksextras' ),
			'css'   => array(
				array(
					'property' => '--xwsf-focus-shadow',
					'selector' => '.wsf-form',
				),
			),
		);

		$this->controls['focusBoxShadowWidth'] = array(
			'tab'         => 'content',
			'group'       => 'general_group',
			'type'        => 'number',
			'units'       => true,
			'placeholder' => '4px',
			'label'       => esc_html__( 'Focus shadow width', 'bricksextras' ),
			'css'         => array(
				array(
					'property' => '--wsf-field-box-shadow-width-focus',
					'selector' => '.wsf-form',
				),
			),
		);

		$this->controls['spacing_sep'] = array(
			'tab'   => 'content',
			'group' => 'spacing_group',
			'type'  => 'separator',
		);

		/* inputs / labels */

		/* spacing */

		$this->controls['gridGutter'] = array(
			'tab'         => 'content',
			'group'       => 'inputs_group',
			'label'       => esc_html__( 'Space between elements', 'bricksextras' ),
			'type'        => 'number',
			'placeholder' => '20',
			'units'       => true,
			'css'         => array(
				array(
					'property' => '--xwsf-grid-gutter',
					'selector' => '.wsf-form',
				),
				array(
					'property' => 'margin-bottom',
					'selector' => '.wsf-form .wsf-field-wrapper',
				),

			),
		);

		$this->controls['labelsSep'] = array(
			'tab'   => 'content',
			'group' => 'inputs_group',
			'label' => esc_html__( 'Labels', 'bricks' ),
			'type'  => 'separator',
		);

		$this->controls['labelsTypography'] = array(
			'tab'   => 'content',
			'group' => 'inputs_group',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.wsf-form label',
				),
				array(
					'property' => 'font',
					'selector' => '.wsf-form label.wsf-label',
				),
			),
		);

			$this->controls['asteriskColor'] = array(
				'tab'   => 'content',
				'group' => 'inputs_group',
				'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Asterisk', 'bricksextras' ) . ')',
				'type'  => 'color',
				'css'   => array(
					array(
						'property' => 'color',
						'selector' => '.wsf-required-wrapper .wsf-text-danger',
					),
				),
			);

			$this->controls['labelMargin'] = array(
				'tab'   => 'content',
				'group' => 'inputs_group',
				'label' => esc_html__( 'Margin', 'bricks' ),
				'type'  => 'spacing',
				'css'   => array(
					array(
						'property' => 'margin',
						'selector' => '.wsf-form label:not(input[type=checkbox].wsf-field + label.wsf-label)',
					),
					array(
						'property' => 'margin',
						'selector' => '.wsf-form label.wsf-label:not(input[type=checkbox].wsf-field + label.wsf-label)',
					),
				),
			);

			$this->controls['sectionLegendSep'] = array(
				'tab'   => 'content',
				'group' => 'inputs_group',
				'label' => esc_html__( 'Section Legend', 'bricksextras' ),
				'type'  => 'separator',
			);

			$section_legend = '.wsf-form .wsf-section > legend';

			$this->controls['sectionLegendTypography'] = array(
				'tab'   => 'content',
				'group' => 'inputs_group',
				'type'  => 'typography',
				'label' => esc_html__( 'Typography', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'font',
						'selector' => $section_legend,
					),
				),
			);

			$this->controls['sectionLegendBackgroundColor'] = array(
				'tab'   => 'content',
				'group' => 'inputs_group',
				'type'  => 'color',
				'label' => esc_html__( 'Background color', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'background-color',
						'selector' => $section_legend,
					),
				),
			);

			$this->controls['sectionLegendBorder'] = array(
				'tab'   => 'content',
				'group' => 'inputs_group',
				'type'  => 'border',
				'label' => esc_html__( 'Border', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'border',
						'selector' => $section_legend,
					),
				),
			);

			$this->controls['sectionLegendPadding'] = array(
				'tab'   => 'content',
				'group' => 'inputs_group',
				'label' => esc_html__( 'Padding', 'bricks' ),
				'type'  => 'spacing',
				'css'   => array(
					array(
						'property' => 'padding',
						'selector' => $section_legend,
					),
				),
			);

			$this->controls['sectionLegendMargin'] = array(
				'tab'   => 'content',
				'group' => 'inputs_group',
				'label' => esc_html__( 'Margin', 'bricks' ),
				'type'  => 'spacing',
				'css'   => array(
					array(
						'property' => 'margin',
						'selector' => $section_legend,
					),
				),
			);

			$this->controls['inputStyle_start'] = array(
				'tab'   => 'content',
				'group' => 'inputs_group',
				'label' => esc_html__( 'Inputs', 'bricksextras' ),
				'type'  => 'separator',
			);

				$this->controls['inputTypography'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'type'  => 'typography',
					'label' => esc_html__( 'Typography', 'bricks' ),
					'css'   => \BricksExtras\Helpers::do_css_rules( 'font', $inputs_array ),
				);

				$this->controls['placeholderTypography'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'type'  => 'typography',
					'label' => esc_html__( 'Placeholder typography', 'bricks' ),
					'css'   => \BricksExtras\Helpers::do_css_rules( 'font', $placeholder_selectors ),
				);

				$this->controls['inputBackgroundColor'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'type'  => 'color',
					'label' => esc_html__( 'Background', 'bricks' ),
					'css'   => \BricksExtras\Helpers::do_css_rules( 'background-color', $inputs_array ),
				);

				$this->controls['inputBorder'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'type'  => 'border',
					'label' => esc_html__( 'Border', 'bricks' ),
					'css'   => \BricksExtras\Helpers::do_css_rules( 'border', $inputs_array ),
				);

				$this->controls['inputBoxShadow'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'label' => esc_html__( 'Box shadow', 'bricks' ),
					'type'  => 'box-shadow',
					'css'   => \BricksExtras\Helpers::do_css_rules( 'box-shadow', $inputs_array ),
				);

				$this->controls['inputPadding'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'label' => esc_html__( 'Padding', 'bricks' ),
					'type'  => 'spacing',
					'css'   => \BricksExtras\Helpers::do_css_rules( 'padding', array_diff( $inputs_array, array( 'input[type="text"].wsf-field', 'select.wsf-field:not([multiple]):not([size])', 'select.wsf-field' ) ) ),
				);

				$this->controls['selectPaddingSep'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'type'  => 'separator',
				);

				$this->controls['selectPadding'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'label' => esc_html__( 'Select padding', 'bricksextras' ),
					'type'  => 'spacing',
					'css'   => array(
						array(
							'property' => 'padding',
							'selector' => 'select.wsf-field',
						),
					),
				);

				/* phone inputs */

				$phone_input = '.wsf-form input[type="tel"].wsf-field.wsf-field';

				$this->controls['phoneSep'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'label' => esc_html__( 'Phone input', 'bricksextras' ),
					'type'  => 'separator',
				);

				$this->controls['phoneinputTypography'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'typography',
					'label' => esc_html__( 'Typography', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'font',
							'selector' => $phone_input,
						),
					),
				);

				$this->controls['phoneplaceholderTypography'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'typography',
					'label' => esc_html__( 'Placeholder typography', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'font',
							'selector' => $phone_input . '::placeholder',
						),
					),
				);

				$this->controls['phoneinputBackgroundColor'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'color',
					'label' => esc_html__( 'Background', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'background-color',
							'selector' => $phone_input,
						),
					),
				);

				$this->controls['phoneinputBorder'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'border',
					'label' => esc_html__( 'Border', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'border',
							'selector' => $phone_input,
						),
					),
				);

				$this->controls['phoneinputBoxShadow'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'label' => esc_html__( 'Box shadow', 'bricks' ),
					'type'  => 'box-shadow',
					'css'   => array(
						array(
							'property' => 'box-shadow',
							'selector' => $phone_input,
						),
					),
				);

				/* international inputs */

				$this->controls['international'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'label' => esc_html__( 'International phone Inputs', 'bricksextras' ),
					'type'  => 'separator',
				);

				$this->controls['phoneinputPadding'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'label' => esc_html__( 'Padding', 'bricks' ),
					'type'  => 'spacing',
					'css'   => array(
						array(
							'property' => 'padding',
							'selector' => '.wsf-form .iti__flag-container + input[type="tel"].wsf-field.wsf-field',
						),
					),
				);

				$this->controls['selectedFlagBg'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'color',
					'label' => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Selected flag', 'bricksextras' ) . ')',
					'css'   => array(
						array(
							'property' => 'background-color',
							'selector' => '.iti__selected-flag',
						),
					),
				);

				$this->controls['selectedFlagPadding'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'spacing',
					'label' => esc_html__( 'Padding', 'bricks' ) . ' (' . esc_html__( 'Selected flag', 'bricksextras' ) . ')',
					'css'   => array(
						array(
							'property' => 'padding',
							'selector' => '.iti__selected-flag',
						),
					),
				);

				$this->controls['dropdownArrowColor'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'color',
					'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Arrow', 'bricksextras' ) . ')',
					'css'   => array(
						array(
							'property' => 'color',
							'selector' => '.iti__arrow',
						),
						array(
							'property' => 'color',
							'selector' => '.iti__arrow:not(.iti__arrow--up)',
						),
					),
				);

				$this->controls['internationalDropdownSep'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'label' => esc_html__( 'International dropdown', 'bricksextras' ),
					'type'  => 'separator',
				);

				$this->controls['countryListBackground'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'color',
					'label' => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Country list', 'bricksextras' ) . ')',
					'css'   => array(
						array(
							'property' => 'background-color',
							'selector' => '.iti__country-list',
						),
					),
				);

				$this->controls['countryListtypography'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'typography',
					'label' => esc_html__( 'Typography', 'bricks' ) . ' (' . esc_html__( 'Country', 'bricksextras' ) . ')',
					'css'   => array(
						array(
							'property' => 'font',
							'selector' => '.iti__country-name',
						),
					),
				);

				$this->controls['countryDialCodetypography'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'typography',
					'label' => esc_html__( 'Typography', 'bricks' ) . ' (' . esc_html__( 'Country dial code', 'bricksextras' ) . ')',
					'css'   => array(
						array(
							'property' => 'font',
							'selector' => '.iti__dial-code',
						),
					),
				);

				$this->controls['countryPadding'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'label' => esc_html__( 'Padding', 'bricks' ) . ' (' . esc_html__( 'Country', 'bricksextras' ) . ')',
					'type'  => 'spacing',
					'css'   => array(
						array(
							'property' => 'padding',
							'selector' => '.iti__country',
						),
					),
				);

				$this->controls['countryHighlightBackground'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'color',
					'label' => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Country highlight', 'bricksextras' ) . ')',
					'css'   => array(
						array(
							'property' => 'background-color',
							'selector' => '.iti__country.iti__highlight',
						),
					),
				);

				$this->controls['countryHighlightColor'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'color',
					'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Country highlight', 'bricksextras' ) . ')',
					'css'   => array(
						array(
							'property' => 'color',
							'selector' => '.iti__country.iti__highlight .iti__country-name',
						),
					),
				);

				$this->controls['countryDialCodeHighlightColor'] = array(
					'tab'   => 'content',
					'group' => 'phone_group',
					'type'  => 'typography',
					'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Country dial code highlight', 'bricksextras' ) . ')',
					'css'   => array(
						array(
							'property' => 'font',
							'selector' => '.iti__country.iti__highlight .iti__dial-code',
						),
					),
				);

				$this->controls['helpSep'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'label' => esc_html__( 'Help text', 'bricksextras' ),
					'type'  => 'separator',
				);

				$this->controls['helpTypography'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'type'  => 'typography',
					'label' => esc_html__( 'Typography', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'font',
							'selector' => '.wsf-form .wsf-help',
						),
					),
				);

				$this->controls['helpTypographyBg'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'type'  => 'color',
					'label' => esc_html__( 'Background', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'background-color',
							'selector' => '.wsf-form .wsf-help',
						),
					),
				);

				$this->controls['helpTypographyBorder'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'type'  => 'border',
					'label' => esc_html__( 'Border', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'background-color',
							'selector' => '.wsf-form .wsf-help',
						),
					),
				);

				$this->controls['helpPadding'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'label' => esc_html__( 'Padding', 'bricks' ),
					'type'  => 'spacing',
					'css'   => array(
						array(
							'property' => 'padding',
							'selector' => '.wsf-form .wsf-help',
						),

					),
				);

				$this->controls['helpMargin'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'label' => esc_html__( 'Margin', 'bricks' ),
					'type'  => 'spacing',
					'css'   => array(
						array(
							'property' => 'margin',
							'selector' => '.wsf-form .wsf-help',
						),
					),
				);

				$this->controls['invalidSep'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'label' => esc_html__( 'Invalid feedback text', 'bricksextras' ),
					'type'  => 'separator',
				);

				$this->controls['invalidTypography'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'type'  => 'typography',
					'label' => esc_html__( 'Typography', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'font',
							'selector' => '.wsf-form .wsf-invalid-feedback',
						),
					),
				);

				$this->controls['invalidTypographyBg'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'type'  => 'color',
					'label' => esc_html__( 'Background', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'background-color',
							'selector' => '.wsf-form .wsf-invalid-feedback',
						),
					),
				);

				$this->controls['invalidTypographyBorder'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'type'  => 'border',
					'label' => esc_html__( 'Border', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'background-color',
							'selector' => '.wsf-form .wsf-invalid-feedback',
						),
					),
				);

				$this->controls['invalidPadding'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'label' => esc_html__( 'Padding', 'bricks' ),
					'type'  => 'spacing',
					'css'   => array(
						array(
							'property' => 'padding',
							'selector' => '.wsf-form .wsf-invalid-feedback',
						),
						array(
							'property' => 'padding',
							'selector' => '.wsf-form input[type=checkbox].wsf-field + label.wsf-label + .wsf-invalid-feedback',
						),

					),
				);

				$this->controls['invalidMargin'] = array(
					'tab'   => 'content',
					'group' => 'inputs_group',
					'label' => esc_html__( 'Margin', 'bricks' ),
					'type'  => 'spacing',
					'css'   => array(
						array(
							'property' => 'margin',
							'selector' => '.wsf-form .wsf-invalid-feedback',
						),
						array(
							'property' => 'margin',
							'selector' => '.wsf-form input[type=checkbox].wsf-field + label.wsf-label + .wsf-invalid-feedback',
						),

					),
				);

				/* prefix */

				$this->controls['prefixSep'] = array(
					'tab'   => 'content',
					'group' => 'prefix_group',
					'label' => esc_html__( 'Prefix', 'bricks' ),
					'type'  => 'separator',
				);

				$this->controls['prefixBackground'] = array(
					'tab'   => 'content',
					'group' => 'prefix_group',
					'type'  => 'color',
					'label' => esc_html__( 'Background', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'background-color',
							'selector' => '.wsf-form .wsf-input-group-prepend',
						),
					),
				);

				$this->controls['prefixBorder'] = array(
					'tab'   => 'content',
					'group' => 'prefix_group',
					'type'  => 'border',
					'label' => esc_html__( 'Border', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'border',
							'selector' => '.wsf-form .wsf-input-group-prepend',
						),
					),
				);

				$this->controls['prefixInputBorder'] = array(
					'tab'   => 'content',
					'group' => 'prefix_group',
					'type'  => 'border',
					'label' => esc_html__( 'Border', 'bricks' ) . ' (' . esc_html__( 'Prefix', 'bricks' ) . ')',
					'css'   => array(
						array(
							'property' => 'border',
							'selector' => '.wsf-form .wsf-input-group-has-prepend input[type].wsf-field',
						),
					),
				);

				$this->controls['prefixTypography'] = array(
					'tab'   => 'content',
					'group' => 'prefix_group',
					'type'  => 'typography',
					'label' => esc_html__( 'Typography', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'font',
							'selector' => '.wsf-form .wsf-input-group-prepend',
						),
					),
				);

				$this->controls['prefixPadding'] = array(
					'tab'   => 'content',
					'group' => 'prefix_group',
					'label' => esc_html__( 'Padding', 'bricks' ),
					'type'  => 'spacing',
					'css'   => array(
						array(
							'property' => 'padding',
							'selector' => '.wsf-form .wsf-input-group-prepend',
						),
					),
				);

				/* suffix */

				$this->controls['suffixSep'] = array(
					'tab'   => 'content',
					'group' => 'prefix_group',
					'label' => esc_html__( 'Suffix', 'bricks' ),
					'type'  => 'separator',
				);

				$this->controls['suffixBackground'] = array(
					'tab'   => 'content',
					'group' => 'prefix_group',
					'type'  => 'color',
					'label' => esc_html__( 'Background', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'background-color',
							'selector' => '.wsf-form .wsf-input-group-append',
						),
					),
				);

				$this->controls['suffixBorder'] = array(
					'tab'   => 'content',
					'group' => 'prefix_group',
					'type'  => 'border',
					'label' => esc_html__( 'Border', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'border',
							'selector' => '.wsf-form .wsf-input-group-append',
						),
					),
				);

				$this->controls['suffixInputBorder'] = array(
					'tab'   => 'content',
					'group' => 'prefix_group',
					'type'  => 'border',
					'label' => esc_html__( 'Border', 'bricks' ) . ' (' . esc_html__( 'Suffix', 'bricks' ) . ')',
					'css'   => array(
						array(
							'property' => 'border',
							'selector' => '.wsf-form .wsf-input-group-has-append input[type].wsf-field',
						),
					),
				);

				$this->controls['suffixTypography'] = array(
					'tab'   => 'content',
					'group' => 'prefix_group',
					'type'  => 'typography',
					'label' => esc_html__( 'Typography', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'font',
							'selector' => '.wsf-form .wsf-input-group-append',
						),
					),
				);

				$this->controls['suffixPadding'] = array(
					'tab'   => 'content',
					'group' => 'prefix_group',
					'label' => esc_html__( 'Padding', 'bricks' ),
					'type'  => 'spacing',
					'css'   => array(
						array(
							'property' => 'padding',
							'selector' => '.wsf-form .wsf-input-group-append',
						),
					),
				);

				/* submit */

				$main_button = '.wsf-form button.wsf-button';

				$this->controls['submitPadding'] = array(
					'tab'   => 'content',
					'group' => 'submit_group',
					'label' => esc_html__( 'Padding', 'bricks' ),
					'type'  => 'spacing',
					'css'   => array(
						array(
							'property' => 'padding',
							'selector' => $main_button,
						),
					),
				);

				$this->controls['submitWidth'] = array(
					'tab'   => 'content',
					'group' => 'submit_group',
					'label' => esc_html__( 'Width', 'bricks' ),
					'type'  => 'number',
					'units' => true,
					'css'   => array(
						array(
							'property' => 'width',
							'selector' => $main_button,
						),
					),
				);

				$this->controls['inputTextAlign'] = array(
					'tab'         => 'content',
					'group'       => 'submit_group',
					'label'       => esc_html__( 'Align', 'bricks' ) . ' (' . esc_html__( 'Button', 'bricks' ) . ')',
					'type'        => 'text-align',
					'css'         => array(
						array(
							'property' => 'text-align',
							'selector' => $main_button,
						),
					),
					'inline'      => true,
					'placeholder' => 'left',
				);

				$this->controls['buttonTypography'] = array(
					'tab'   => 'content',
					'group' => 'submit_group',
					'type'  => 'typography',
					'label' => esc_html__( 'Typography', 'bricks' ),
					'css'   => array(
						array(
							'property' => 'font',
							'selector' => $main_button,
						),
					),
				);

					$this->controls['submitStyle_start'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'separator',
						'label' => esc_html__( 'Submit button', 'bricks' ),
					);

					$submit_button = '.wsf-form button.wsf-button.wsf-button-primary';

					$this->controls['submitTypography'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'typography',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => $submit_button,
							),
						),
					);

					$this->controls['submitBackgroundColor'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'color',
						'label' => esc_html__( 'Background', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => $submit_button,
							),
						),
					);

					$this->controls['submitBorder'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'border',
						'label' => esc_html__( 'Border', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => $submit_button,
							),
						),
					);

					$this->controls['submitBoxShadow'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => $submit_button,
							),
						),
					);

					$this->controls['saveStyle_start'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'separator',
						'label' => esc_html__( 'Save Button', 'bricksextras' ),
					);

					$save_button = '.wsf-form button.wsf-button[data-action="wsf-save"]';

					$this->controls['saveTypography'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'typography',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => $save_button,
							),
						),
					);

					$this->controls['saveBackgroundColor'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'color',
						'label' => esc_html__( 'Background', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => $save_button,
							),
						),
					);

					$this->controls['saveBorder'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'border',
						'label' => esc_html__( 'Border', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => $save_button,
							),
						),
					);

					$this->controls['saveBoxShadow'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => $save_button,
							),
						),
					);

					$this->controls['resetStyle_start'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'separator',
						'label' => esc_html__( 'Reset Button', 'bricksextras' ),
					);

					$reset_button = '.wsf-form button.wsf-button[data-action="wsf-reset"]';

					$this->controls['resetTypography'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'typography',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => $reset_button,
							),
						),
					);

					$this->controls['resetBackgroundColor'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'color',
						'label' => esc_html__( 'Background', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => $reset_button,
							),
						),
					);

					$this->controls['resetBorder'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'border',
						'label' => esc_html__( 'Border', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => $reset_button,
							),
						),
					);

					$this->controls['resetBoxShadow'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => $reset_button,
							),
						),
					);

					$this->controls['clearStyle_start'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'separator',
						'label' => esc_html__( 'Clear button', 'bricksextras' ),
					);

					$clear_button = '.wsf-form button.wsf-button[data-action="wsf-clear"]';

					$this->controls['clearTypography'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'typography',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => $clear_button,
							),
						),
					);

					$this->controls['clearBackgroundColor'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'color',
						'label' => esc_html__( 'Background', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => $clear_button,
							),
						),
					);

					$this->controls['clearBorder'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'border',
						'label' => esc_html__( 'Border', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => $clear_button,
							),
						),
					);

					$this->controls['clearBoxShadow'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => $clear_button,
							),
						),
					);

					$this->controls['prevStyle_start'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'separator',
						'label' => esc_html__( 'Previous Button', 'bricksextras' ),
					);

					$previous_button = '.wsf-form button.wsf-button[data-action="wsf-tab_previous"]';

					$this->controls['prevTypography'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'typography',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => $previous_button,
							),
						),
					);

					$this->controls['prevBackgroundColor'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'color',
						'label' => esc_html__( 'Background', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => $previous_button,
							),
						),
					);

					$this->controls['prevBorder'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'border',
						'label' => esc_html__( 'Border', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => $previous_button,
							),
						),
					);

					$this->controls['prevBoxShadow'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => $previous_button,
							),
						),
					);

					$this->controls['nextStyle_start'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'separator',
						'label' => esc_html__( 'Button', 'bricks' ) . ' (' . esc_html__( 'Next', 'bricks' ) . ')',
					);

					$next_button = '.wsf-form button.wsf-button[data-action="wsf-tab_next"]';

					$this->controls['nextTypography'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'typography',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => $next_button,
							),
						),
					);

					$this->controls['nextBackgroundColor'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'color',
						'label' => esc_html__( 'Background', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => $next_button,
							),
						),
					);

					$this->controls['nextBorder'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'border',
						'label' => esc_html__( 'Border', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => $next_button,
							),
						),
					);

					$this->controls['nextBoxShadow'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => $next_button,
							),
						),
					);

					$this->controls['moveUpStyle_start'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'separator',
						'label' => esc_html__( 'Move Up Button', 'bricksextras' ),
					);

					$move_up_button = '.wsf-form button.wsf-button[data-action="wsf-section-move-up-button"]';

					$this->controls['moveUpTypography'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'typography',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => $move_up_button,
							),
						),
					);

					$this->controls['moveUpBackgroundColor'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'color',
						'label' => esc_html__( 'Background', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => $move_up_button,
							),
						),
					);

					$this->controls['moveUpBorder'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'border',
						'label' => esc_html__( 'Border', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => $move_up_button,
							),
						),
					);

					$this->controls['moveUpBoxShadow'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => $move_up_button,
							),
						),
					);

					$this->controls['moveDownStyle_start'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'separator',
						'label' => esc_html__( 'Move Down Button', 'bricksextras' ),
					);

					$move_down_button = '.wsf-form button.wsf-button[data-action="wsf-section-move-down-button"]';

					$this->controls['moveDownTypography'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'typography',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => $move_down_button,
							),
						),
					);

					$this->controls['moveDownBackgroundColor'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'color',
						'label' => esc_html__( 'Background', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => $move_down_button,
							),
						),
					);

					$this->controls['moveDownBorder'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'type'  => 'border',
						'label' => esc_html__( 'Border', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => $move_down_button,
							),
						),
					);

					$this->controls['moveDownBoxShadow'] = array(
						'tab'   => 'content',
						'group' => 'submit_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => $move_down_button,
							),
						),
					);

					/* checkbox */

					$checkbox_input = '.wsf-form input[type=checkbox].wsf-field + label.wsf-label:before';
					$radio_input    = '.wsf-form input[type=radio].wsf-field + label.wsf-label:before';

					$checkbox_input_after = '.wsf-form input[type=checkbox].wsf-field + label.wsf-label:after';
					$radio_input_after    = '.wsf-form input[type=radio].wsf-field + label.wsf-label:after';

					$checkbox_input_checked = '.wsf-form input[type=checkbox].wsf-field:checked + label.wsf-label:before';
					$radio_input_checked    = '.wsf-form input[type=radio].wsf-field:checked + label.wsf-label:before';

					if ( $form_styler_enabled ) {

						$checkbox_input = '.wsf-form input[type=checkbox].wsf-field';
						$radio_input    = '.wsf-form input[type=radio].wsf-field';

						$checkbox_input_after = '.wsf-form input[type=checkbox].wsf-field';
						$radio_input_after    = '.wsf-form input[type=radio].wsf-field';

						$checkbox_input_checked = '.wsf-form input[type=checkbox].wsf-field:checked';
						$radio_input_checked    = '.wsf-form input[type=radio].wsf-field:checked';

					}

					$this->controls['radioCheckBoxLabel'] = array(
						'tab'   => 'content',
						'group' => 'checkbox_group',
						'label' => esc_html__( 'Label typography', 'bricks' ),
						'type'  => 'typography',
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => '.wsf-form input[type=checkbox].wsf-field + label.wsf-label',
							),
							array(
								'property' => 'font',
								'selector' => '.wsf-form input[type=radio].wsf-field + label.wsf-label',
							),
						),
					);

					$this->controls['radioCheckboxSize'] = array(
						'tab'   => 'content',
						'group' => 'checkbox_group',
						'label' => esc_html__( 'Size', 'bricks' ),
						'type'  => 'number',
						'units' => true,
						'css'   => array(
							array(
								'property' => 'width',
								'selector' => $checkbox_input,
							),
							array(
								'property' => 'width',
								'selector' => $radio_input,
							),
							array(
								'property' => 'width',
								'selector' => $checkbox_input_after,
							),
							array(
								'property' => 'width',
								'selector' => $radio_input_after,
							),
							array(
								'property' => 'height',
								'selector' => $checkbox_input,
							),
							array(
								'property' => 'height',
								'selector' => $radio_input,
							),
							array(
								'property' => 'height',
								'selector' => $checkbox_input_after,
							),
							array(
								'property' => 'height',
								'selector' => $radio_input_after,
							),
							array(
								'property' => '--xwsf-checkbox-size',
								'selector' => '.wsf-form',
							),
							array(
								'property' => '--wsf-field-checkbox-size',
								'selector' => '.wsf-form',
							),
							array(
								'property' => '--wsf-field-radio-size',
								'selector' => '.wsf-form',
							),

						),
					);

					if ( $form_styler_enabled ) {

						$vertical_spacing_css = array(

							array(
								'property' => '--wsf-field-checkbox-gap-vertical',
								'selector' => '.wsf-form',
							),
							array(
								'property' => '--wsf-field-radio-gap-vertical',
								'selector' => '.wsf-form',
							),

						);

					} else {

						$vertical_spacing_css = array(
							array(
								'property' => '-webkit-margin-end',
								'selector' => '.wsf-form .wsf-inline',
							),
							array(
								'property' => 'margin-end',
								'selector' => '.wsf-form .wsf-inline',
							),
							array(
								'property' => 'margin-bottom',
								'selector' => '.wsf-form input[type=checkbox].wsf-field + label.wsf-label',
							),
							array(
								'property' => 'margin-bottom',
								'selector' => '.wsf-form input[type=radio].wsf-field + label.wsf-label',
							),

						);

					}

					$this->controls['radioCheckboxMargin'] = array(
						'tab'   => 'content',
						'group' => 'checkbox_group',
						'label' => esc_html__( 'Spacing', 'bricks' ) . ' (' . esc_attr__( 'Vertical', 'bricks' ) . ')',
						'type'  => 'number',
						'units' => true,
						'css'   => $vertical_spacing_css,
					);

					$this->controls['radioCheckboxSpacing'] = array(
						'tab'   => 'content',
						'group' => 'checkbox_group',
						'label' => esc_html__( 'Spacing', 'bricks' ) . ' (' . esc_attr__( 'Horizontal', 'bricks' ) . ')',
						'type'  => 'number',
						'units' => true,
						'css'   => array(
							array(
								'property' => '--xwsf-checkbox-spacing',
								'selector' => '.wsf-form',
							),
						),
					);

					$this->controls['radioCheckboxColor'] = array(
						'tab'   => 'content',
						'group' => 'checkbox_group',
						'label' => esc_html__( 'Color', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background',
								'selector' => $checkbox_input,
							),
							array(
								'property' => 'background',
								'selector' => $radio_input,
							),
						),
					);

					$this->controls['radioCheckboxColorBorderColor'] = array(
						'tab'   => 'content',
						'group' => 'checkbox_group',
						'label' => esc_html__( 'Border color', 'bricks' ),
						'type'  => 'color',
						'units' => true,
						'css'   => array(
							array(
								'property' => 'border-color',
								'selector' => '.wsf-form input[type=radio].wsf-field',
							),
							array(
								'property' => 'border-color',
								'selector' => '.wsf-form input[type=checkbox].wsf-field',
							),
						),
					);

					$this->controls['radioCheckboxAlignItems'] = array(
						'tab'     => 'content',
						'label'   => esc_html__( 'Align main axis', 'bricks' ),
						'group'   => 'checkbox_group',
						'exclude' => array( 'stretch' ),
						'type'    => 'align-items',
						'css'     => array(
							array(
								'property' => 'align-items',
								'selector' => '.wsf-form input[type=radio].wsf-field + label.wsf-label',
							),
							array(
								'property' => 'align-items',
								'selector' => '.wsf-form input[type=checkbox].wsf-field + label.wsf-label',
							),
							array(
								'property' => 'align-items',
								'selector' => '.wsf-form [data-row-radio]',
							),
							array(
								'property' => 'align-items',
								'selector' => '.wsf-form [data-row-checkbox]',
							),
						),
					);

					$this->controls['radioCheckboxCheckedSep'] = array(
						'tab'   => 'content',
						'group' => 'checkbox_group',
						'label' => esc_html__( 'Checked', 'bricksextras' ),
						'type'  => 'separator',
					);

					$this->controls['radioCheckboxBgColorChecked'] = array(
						'tab'   => 'content',
						'group' => 'checkbox_group',
						'label' => esc_html__( 'Color', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => $checkbox_input_checked,
							),
							array(
								'property' => 'background-color',
								'selector' => $radio_input_checked,
							),
							array(
								'property' => 'border-color',
								'selector' => $checkbox_input_checked,
							),
							array(
								'property' => 'border-color',
								'selector' => $radio_input_checked,
							),
						),
					);

					$this->controls['radioCheckboxColorChecked'] = array(
						'tab'   => 'content',
						'group' => 'checkbox_group',
						'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Indicator', 'bricksextras' ) . ')',
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form .wsf-groups input[type=radio].wsf-field:checked + label.wsf-label:after',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form .wsf-groups input[type=checkbox].wsf-field:checked + label.wsf-label:after',
							),
							array(
								'property' => '--wsf-field-checkbox-checkmark-color',
								'selector' => '.wsf-form',
							),
							array(
								'property' => '--wsf-field-radio-checked-color',
								'selector' => '.wsf-form',
							),
						),
					);

					/* range slider */

					$this->controls['rangeSliderUpperBg'] = array(
						'tab'   => 'content',
						'group' => 'range_group',
						'label' => esc_html__( 'Slider Color (upper track)', 'bricksextras' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => '--wsf-color-upper-track',
								'selector' => '.wsf-form input[type=range].wsf-field',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form input[type=range].wsf-field::-webkit-slider-runnable-track',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form input[type=range].wsf-field::-moz-range-track',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form input[type=range].wsf-field::-ms-track',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form input[type=range].wsf-field::-ms-fill-lower,input[type=range].wsf-field::-ms-fill-upper',
							),
						),
					);

					$this->controls['rangeSliderBg'] = array(
						'tab'   => 'content',
						'group' => 'range_group',
						'label' => esc_html__( 'Slider Color (lower track)', 'bricksextras' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => 'input[type=range].wsf-field[data-fill-lower-track]::-ms-fill-lower',
							),
							array(
								'property' => '--wsf-color-lower-track',
								'selector' => '.wsf-form input[type=range].wsf-field',
							),
						),
					);

					$this->controls['rangeSliderControlColor'] = array(
						'tab'   => 'content',
						'group' => 'range_group',
						'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Control', 'bricksextras' ) . ')',
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form input[type=range].wsf-field[data-fill-lower-track]::-ms-fill-lower',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form input[type=range].wsf-field::-webkit-slider-thumb',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form input[type=range].wsf-field::-moz-range-thumb',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form input[type=range].wsf-field::-ms-thumb',
							),
						),
					);

					$this->controls['tickTypography'] = array(
						'tab'   => 'content',
						'group' => 'range_group',
						'label' => esc_html__( 'Typography', 'bricks' ) . ' (' . esc_html__( 'Tick mark', 'bricksextras' ) . ')',
						'type'  => 'typography',
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => ".wsf-form .wsf-field-wrapper[data-type='range'] input[type=range].wsf-field + datalist option",
							),
							array(
								'property' => 'font',
								'selector' => ".wsf-field-wrapper[data-type='price_range'] input[type=range].wsf-field + datalist option",
							),
						),
					);

					/* Meter */

					$this->controls['meterSep'] = array(
						'tab'   => 'content',
						'group' => 'meter_group',
						'label' => esc_html__( 'Meter', 'bricksextras' ),
						'type'  => 'separator',
					);

					$this->controls['meterBackground'] = array(
						'tab'   => 'content',
						'group' => 'meter_group',
						'label' => esc_html__( 'Background', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form meter.wsf-meter::-webkit-meter-bar',
							),
						),
					);

					$this->controls['meterActiveBackground'] = array(
						'tab'   => 'content',
						'group' => 'meter_group',
						'label' => esc_html__( 'Active background', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form meter.wsf-meter::-webkit-meter-optimum-value',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form meter.wsf-meter:-moz-meter-optimum::-moz-meter-bar',
							),
						),
					);

					$this->controls['progressSep'] = array(
						'tab'   => 'content',
						'group' => 'meter_group',
						'label' => esc_html__( 'Progress Bar', 'bricks' ),
						'type'  => 'separator',
					);

					$this->controls['progressBackground'] = array(
						'tab'   => 'content',
						'group' => 'meter_group',
						'label' => esc_html__( 'Background', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form progress.wsf-progress[value]',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form progress.wsf-progress[value]::-webkit-progress-bar',
							),

						),
					);

					$this->controls['progessActiveBackground'] = array(
						'tab'   => 'content',
						'group' => 'meter_group',
						'label' => esc_html__( 'Active background', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form progress.wsf-progress[value]::-webkit-progress-value',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form progress.wsf-progress[value]::-moz-progress-bar',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form progress.wsf-progress[value]::-ms-fill',
							),

						),
					);

					/* tabs */

					$this->controls['tabTypography'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'type'  => 'typography',
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => '.wsf-form ul.wsf-group-tabs > li > a',
							),
						),
					);

					$this->controls['tabActiveTypography'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Typography', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
						'type'  => 'typography',
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => '.wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a',
							),
						),
					);

					$this->controls['tab_sep'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Tabs', 'bricks' ) . ' (' . esc_html__( 'Standard', 'bricks' ) . ')',
						'type'  => 'separator',
					);

					$this->controls['tabBorder'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Border color', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'border-top-color',
								'selector' => '.wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a',
							),
							array(
								'property' => 'border-left-color',
								'selector' => '.wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a',
							),
							array(
								'property' => 'border-right-color',
								'selector' => '.wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a',
							),
							array(
								'property' => 'border-color',
								'selector' => '.wsf-form ul.wsf-group-tabs',
							),
						),
					);

					$this->controls['tabBackground'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Background', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form ul.wsf-group-tabs > li > a',
							),
						),
					);

					$this->controls['tabActiveBackground'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a',
							),
						),
					);

					$this->controls['tabWidth'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Width', 'bricks' ),
						'type'  => 'number',
						'units' => true,
						'css'   => array(
							array(
								'property' => 'width',
								'selector' => '.wsf-form ul.wsf-group-tabs > li',
							),
						),
					);

					$this->controls['tabPadding'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Padding', 'bricks' ),
						'type'  => 'spacing',
						'css'   => array(
							array(
								'property' => 'padding',
								'selector' => '.wsf-form ul.wsf-group-tabs > li > a',
							),
						),
					);

					$this->controls['tabsMargin'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Margin', 'bricks' ),
						'type'  => 'spacing',
						'css'   => array(
							array(
								'property' => 'margin',
								'selector' => '.wsf-form ul.wsf-group-tabs',
							),
						),
					);

					$this->controls['tabStepsSep'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Tabs', 'bricks' ) . ' (' . esc_html__( 'Steps', 'bricks' ) . ')',
						'type'  => 'separator',
					);

					$this->controls['tabStepsSize'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Size', 'bricks' ) . ' (' . esc_html__( 'Steps', 'bricks' ) . ')',
						'type'  => 'number',
						'units' => true,
						'css'   => array(
							array(
								'property' => '--x-wsf-step-size',
								'selector' => '.wsf-form',
							),
						),
					);

					$this->controls['tabStepsTypography'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Typography', 'bricks' ) . ' (' . esc_html__( 'Steps', 'bricks' ) . ')',
						'type'  => 'typography',
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-tabs > li > a:before',
							),
						),
					);

					$this->controls['tabStepsLabelTypography'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Typography', 'bricks' ) . ' (' . esc_html__( 'Labels', 'bricks' ) . ')',
						'type'  => 'typography',
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-tabs > li > a span',
							),
						),
					);

					$this->controls['tabStepsBorder'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Tab', 'bricks' ) . ')',
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'border-color',
								'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-tabs > li.wsf-tab-active ~ li > a:before',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li.wsf-tab-active ~ li > a:after',
							),
							array(
								'property' => 'color',
								'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-tabs > li.wsf-tab-active ~ li > a:before',
							),

						),
					);

					$this->controls['tabStepsActiveBorder'] = array(
						'tab'   => 'content',
						'group' => 'tab_group',
						'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Active Tab', 'bricks' ) . ')',
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'border-color',
								'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-tabs > li.wsf-tab-active > a:before',
							),
							array(
								'property' => 'color',
								'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-tabs > li.wsf-tab-active > a:before',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-tabs > li > a:after',
							),
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li > a:before',
							),
							array(
								'property' => 'border-color',
								'selector' => '.wsf-form ul.wsf-group-tabs.wsf-steps > li > a:before',
							),

						),
					);

					/* tab content */

					$this->controls['tabContentBackground'] = array(
						'tab'   => 'content',
						'group' => 'tab_content_group',
						'label' => esc_html__( 'Background', 'bricks' ),
						'type'  => 'background',
						'css'   => array(
							array(
								'property' => 'background',
								'selector' => '.wsf-form .wsf-group',
							),
						),
					);

					$this->controls['tabContentBorder'] = array(
						'tab'   => 'content',
						'group' => 'tab_content_group',
						'label' => esc_html__( 'Border', 'bricks' ),
						'type'  => 'border',
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => '.wsf-form .wsf-group',
							),
						),
					);

					$this->controls['tabContentPadding'] = array(
						'tab'   => 'content',
						'group' => 'tab_content_group',
						'label' => esc_html__( 'Padding', 'bricks' ),
						'type'  => 'spacing',
						'css'   => array(
							array(
								'property' => 'padding',
								'selector' => '.wsf-form .wsf-group',
							),
						),
					);

					/* file upload file_upload_group */

					$this->controls['fileUploadColor'] = array(
						'tab'   => 'content',
						'group' => 'file_upload_group',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'type'  => 'typography',
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => '.wsf-form input[type=text].wsf-field ~ .dropzone .dz-message',
							),
						),
					);

					$this->controls['fileUploadBorder'] = array(
						'tab'   => 'content',
						'group' => 'file_upload_group',
						'label' => esc_html__( 'Border', 'bricks' ),
						'type'  => 'border',
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => '.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone',
							),
						),
					);

					$this->controls['fileUploadBackground'] = array(
						'tab'   => 'content',
						'group' => 'file_upload_group',
						'label' => esc_html__( 'Background color', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone',
							),
						),
					);

					$this->controls['fileUploadPadding'] = array(
						'tab'   => 'content',
						'group' => 'file_upload_group',
						'label' => esc_html__( 'Padding', 'bricks' ),
						'type'  => 'spacing',
						'css'   => array(
							array(
								'property' => 'padding',
								'selector' => '.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone',
							),
						),
					);

					/* messages */

					$this->controls['successMessageSep'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Success message', 'bricks' ),
						'type'  => 'separator',
					);

					$this->controls['successMessageBackground'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Background', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => 'div.wsf-alert.wsf-alert-success',
							),
						),
					);

					$this->controls['successMessageTypography'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'type'  => 'typography',
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => 'div.wsf-alert.wsf-alert-success',
							),
						),
					);

					$this->controls['successMessageBorder'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Border', 'bricks' ),
						'type'  => 'border',
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => 'div.wsf-alert.wsf-alert-success',
							),
						),
					);

					$this->controls['successMessageShadow'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => 'div.wsf-alert.wsf-alert-success',
							),
						),
					);

					$this->controls['informationMessageSep'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Information messages', 'bricksextras' ),
						'type'  => 'separator',
					);

					$this->controls['informationMessageBackground'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Background', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form .wsf-alert.wsf-alert-information',
							),
						),
					);

					$this->controls['informationMessageTypography'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'type'  => 'typography',
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => '.wsf-form .wsf-alert.wsf-alert-information',
							),
						),
					);

					$this->controls['informationMessageBorder'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Border', 'bricks' ),
						'type'  => 'border',
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => '.wsf-form .wsf-alert.wsf-alert-information',
							),
						),
					);

					$this->controls['informationMessageShadow'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => '.wsf-form .wsf-alert.wsf-alert-information',
							),
						),
					);

					$this->controls['warningMessageSep'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Warning', 'bricks' ),
						'type'  => 'separator',
					);

					$this->controls['warningMessageBackground'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Background', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form .wsf-alert.wsf-alert-warning',
							),
						),
					);

					$this->controls['warningMessageTypography'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'type'  => 'typography',
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => '.wsf-form .wsf-alert.wsf-alert-warning',
							),
						),
					);

					$this->controls['warningMessageBorder'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Border', 'bricks' ),
						'type'  => 'border',
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => '.wsf-form .wsf-alert.wsf-alert-warning',
							),
						),
					);

					$this->controls['warningMessageShadow'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => '.wsf-form .wsf-alert.wsf-alert-warning',
							),
						),
					);

					$this->controls['dangerMessageSep'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Danger message', 'bricksextras' ),
						'type'  => 'separator',
					);

					$this->controls['dangerMessageBackground'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Background', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form .wsf-alert.wsf-alert-danger',
							),
						),
					);

					$this->controls['dangerMessageTypography'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'type'  => 'typography',
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => '.wsf-form .wsf-alert.wsf-alert-danger',
							),
						),
					);

					$this->controls['dangerMessageBorder'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Border', 'bricks' ),
						'type'  => 'border',
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => '.wsf-form .wsf-alert.wsf-alert-danger',
							),
						),
					);

					$this->controls['dangerMessageShadow'] = array(
						'tab'   => 'content',
						'group' => 'messages_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => '.wsf-form .wsf-alert.wsf-alert-danger',
							),
						),
					);

					/* repeatable repeatable_group */

					$this->controls['addStyle_start'] = array(
						'tab'   => 'content',
						'group' => 'repeatable_group',
						'type'  => 'separator',
						'label' => esc_html__( 'Button', 'bricks' ) . ' (' . esc_html__( 'Add', 'bricks' ) . ')',
					);

					$add_button = '.wsf-form button.wsf-button[data-action="wsf-section-add-button"]';

					$this->controls['addTypography'] = array(
						'tab'   => 'content',
						'group' => 'repeatable_group',
						'type'  => 'typography',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => $add_button,
							),
						),
					);

					$this->controls['addBackgroundColor'] = array(
						'tab'   => 'content',
						'group' => 'repeatable_group',
						'type'  => 'color',
						'label' => esc_html__( 'Background', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => $add_button,
							),
						),
					);

					$this->controls['addBorder'] = array(
						'tab'   => 'content',
						'group' => 'repeatable_group',
						'type'  => 'border',
						'label' => esc_html__( 'Border', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => $add_button,
							),
						),
					);

					$this->controls['addBoxShadow'] = array(
						'tab'   => 'content',
						'group' => 'repeatable_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => $add_button,
							),
						),
					);

					$this->controls['removeStyle_start'] = array(
						'tab'   => 'content',
						'group' => 'repeatable_group',
						'type'  => 'separator',
						'label' => esc_html__( 'Button', 'bricks' ) . ' (' . esc_html__( 'Remove', 'bricks' ) . ')',
					);

					$remove_button = '.wsf-form button.wsf-button[data-action="wsf-section-delete-button"]';

					$this->controls['removeTypography'] = array(
						'tab'   => 'content',
						'group' => 'repeatable_group',
						'type'  => 'typography',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => $remove_button,
							),
						),
					);

					$this->controls['removeBackgroundColor'] = array(
						'tab'   => 'content',
						'group' => 'repeatable_group',
						'type'  => 'color',
						'label' => esc_html__( 'Background', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => $remove_button,
							),
						),
					);

					$this->controls['removeBorder'] = array(
						'tab'   => 'content',
						'group' => 'repeatable_group',
						'type'  => 'border',
						'label' => esc_html__( 'Border', 'bricks' ),
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => $remove_button,
							),
						),
					);

					$this->controls['removeBoxShadow'] = array(
						'tab'   => 'content',
						'group' => 'repeatable_group',
						'label' => esc_html__( 'Box shadow', 'bricks' ),
						'type'  => 'box-shadow',
						'css'   => array(
							array(
								'property' => 'box-shadow',
								'selector' => $remove_button,
							),
						),
					);

					$this->controls['iconsStyle_start'] = array(
						'tab'   => 'content',
						'group' => 'repeatable_group',
						'type'  => 'separator',
						'label' => esc_html__( 'Icons', 'bricks' ),
					);

					$this->controls['repeatableIconSize'] = array(
						'tab'         => 'content',
						'group'       => 'repeatable_group',
						'label'       => esc_html__( 'Icon size', 'bricks' ),
						'type'        => 'number',
						'units'       => true,
						'placeholder' => '24px',
						'css'         => array(
							array(
								'property' => 'height',
								'selector' => '.wsf-form .wsf-section-icon',
							),
							array(
								'property' => 'width',
								'selector' => '.wsf-form .wsf-section-icon',
							),
						),
					);

					$this->controls['repeatableIconColor'] = array(
						'tab'   => 'content',
						'group' => 'repeatable_group',
						'label' => esc_html__( 'Color', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property'  => 'fill',
								'selector'  => '.wsf-form .wsf-section-icon path',
								'important' => true,
							),
						),
					);

					$this->controls['repeatableIconGap'] = array(
						'tab'         => 'content',
						'group'       => 'repeatable_group',
						'label'       => esc_html__( 'Gap', 'bricks' ),
						'type'        => 'number',
						'units'       => true,
						'placeholder' => '5px',
						'css'         => array(
							array(
								'property'  => ' -webkit-margin-end',
								'selector'  => '.wsf-form .wsf-section-icons > a',
								'important' => true,
							),
							array(
								'property'  => 'margin-inline-end',
								'selector'  => '.wsf-form .wsf-section-icons > a',
								'important' => true,
							),
						),
					);

					/* password  */

					$this->controls['passwordWrapperBackground'] = array(
						'tab'   => 'content',
						'group' => 'password_group',
						'label' => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Icon wrapper', 'bricksextras' ) . ')',
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'background-color',
								'selector' => '.wsf-form .wsf-field-wrapper[data-type=password] .wsf-input-group-append',
							),
						),
					);

					$this->controls['passwordWrapperPadding'] = array(
						'tab'   => 'content',
						'group' => 'password_group',
						'label' => esc_html__( 'Padding', 'bricks' ) . ' (' . esc_html__( 'Icon wrapper', 'bricksextras' ) . ')',
						'type'  => 'spacing',
						'css'   => array(
							array(
								'property' => 'padding',
								'selector' => '.wsf-form .wsf-field-wrapper[data-type=password] .wsf-input-group-append',
							),
						),
					);

					$this->controls['passwordGeneratePasswordSep'] = array(
						'tab'   => 'content',
						'group' => 'password_group',
						'label' => esc_html__( 'Generate Password Icon', 'bricksextras' ),
						'type'  => 'separator',
					);

					$this->controls['passwordGeneratePasswordIconColor'] = array(
						'tab'   => 'content',
						'group' => 'password_group',
						'label' => esc_html__( 'Icon color', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'fill',
								'selector' => '.wsf-form .wsf-field-wrapper[data-type=password] [data-wsf-password-generate] svg',
							),
						),
					);

					$this->controls['passwordGeneratePasswordIconSize'] = array(
						'tab'   => 'content',
						'group' => 'password_group',
						'label' => esc_html__( 'Icon size', 'bricks' ),
						'type'  => 'number',
						'units' => true,
						'css'   => array(
							array(
								'property' => 'height',
								'selector' => '.wsf-form .wsf-field-wrapper[data-type=password] [data-wsf-password-generate] svg',
							),
							array(
								'property' => 'width',
								'selector' => '.wsf-form .wsf-field-wrapper[data-type=password] [data-wsf-password-generate] svg',
							),
						),
					);

					$this->controls['passwordVisibilityPasswordSep'] = array(
						'tab'   => 'content',
						'group' => 'password_group',
						'label' => esc_html__( 'Password Visibilty Icon', 'bricksextras' ),
						'type'  => 'separator',
					);

					$this->controls['passwordVisibilityPasswordIconColor'] = array(
						'tab'   => 'content',
						'group' => 'password_group',
						'label' => esc_html__( 'Icon color', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property' => 'fill',
								'selector' => '.wsf-form .wsf-field-wrapper[data-type=password] [data-wsf-password-visibility-toggle] svg',
							),
						),
					);

					$this->controls['passwordVisibilityPasswordIconSize'] = array(
						'tab'   => 'content',
						'group' => 'password_group',
						'label' => esc_html__( 'Icon size', 'bricks' ),
						'type'  => 'number',
						'units' => true,
						'css'   => array(
							array(
								'property' => 'height',
								'selector' => '.wsf-form .wsf-field-wrapper[data-type=password] [data-wsf-password-visibility-toggle] svg',
							),
							array(
								'property' => 'width',
								'selector' => '.wsf-form .wsf-field-wrapper[data-type=password] [data-wsf-password-visibility-toggle] svg',
							),
						),
					);

					/* legal  */

					$this->controls['legalTypography'] = array(
						'tab'   => 'content',
						'group' => 'legal_group',
						'label' => esc_html__( 'Typography', 'bricks' ),
						'type'  => 'typography',
						'css'   => array(
							array(
								'property' => 'font',
								'selector' => '.wsf-form [data-wsf-legal].wsf-field',
							),
						),
					);

					$this->controls['legalBackground'] = array(
						'tab'   => 'content',
						'group' => 'legal_group',
						'label' => esc_html__( 'Background', 'bricks' ),
						'type'  => 'background',
						'css'   => array(
							array(
								'property' => 'background',
								'selector' => '.wsf-form [data-wsf-legal].wsf-field',
							),
						),
					);

					$this->controls['legalBorder'] = array(
						'tab'   => 'content',
						'group' => 'legal_group',
						'label' => esc_html__( 'Border', 'bricks' ),
						'type'  => 'border',
						'css'   => array(
							array(
								'property' => 'border',
								'selector' => '.wsf-form [data-wsf-legal].wsf-field',
							),
						),
					);

					$this->controls['legalPadding'] = array(
						'tab'   => 'content',
						'group' => 'legal_group',
						'label' => esc_html__( 'Padding', 'bricks' ),
						'type'  => 'spacing',
						'css'   => array(
							array(
								'property' => 'padding',
								'selector' => '.wsf-form [data-wsf-legal].wsf-field',
							),
						),
					);

					/* star rating */

					$this->controls['starsSep'] = array(
						'tab'   => 'content',
						'group' => 'star_rating_group',
						'label' => esc_html__( 'Stars', 'bricks' ),
						'type'  => 'separator',
					);

					$this->controls['starColor'] = array(
						'tab'   => 'content',
						'group' => 'star_rating_group',
						'label' => esc_html__( 'Color', 'bricks' ),
						'type'  => 'color',
						'css'   => array(
							array(
								'property'  => 'fill',
								'selector'  => 'ul.wsf-rating li:not(.wsf-rating-selected) path',
								'important' => true,
							),
						),
					);

					$this->controls['starSelectedColor'] = array(
						'tab'   => 'content',
						'group' => 'star_rating_group',
						'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Selected', 'bricks' ) . ')',
						'type'  => 'color',
						'css'   => array(
							array(
								'property'  => 'fill',
								'selector'  => 'ul.wsf-rating li.wsf-rating-selected path',
								'important' => true,
							),
						),
					);

					$this->controls['starGap'] = array(
						'tab'   => 'content',
						'group' => 'star_rating_group',
						'label' => esc_html__( 'Gap', 'bricks' ),
						'type'  => 'number',
						'units' => true,
						'css'   => array(
							array(
								'property' => 'gap',
								'selector' => 'ul.wsf-rating',
							),
						),
					);

					$this->controls['starSize'] = array(
						'tab'         => 'content',
						'group'       => 'star_rating_group',
						'label'       => esc_html__( 'Size', 'bricks' ),
						'placeholder' => '24px',
						'type'        => 'number',
						'units'       => true,
						'css'         => array(
							array(
								'property' => 'height',
								'selector' => 'ul.wsf-rating svg',
							),
							array(
								'property' => 'width',
								'selector' => 'ul.wsf-rating svg',
							),
						),
					);
	}

	/**
	 * Enqueue scripts.
	 */
	public function enqueue_scripts() {

		if ( bricks_is_builder_main() ) {
			return;
		}

		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			if ( method_exists( '\WS_Form_Common', 'styler_enabled' ) && ! \WS_Form_Common::styler_enabled() ) {
				wp_enqueue_style( 'x-ws-forms', BRICKSEXTRAS_URL . 'components/assets/css/wsforms.css', array(), \BricksExtras\Plugin::VERSION );
			} else {
				wp_enqueue_style( 'x-ws-forms-styler', BRICKSEXTRAS_URL . 'components/assets/css/wsforms-styler-enabled.css', array(), \BricksExtras\Plugin::VERSION );
			}
		}
	}


	/**
	 * Render element output.
	 */
	public function render() {

		if ( ! defined( 'WS_FORM_NAME' ) ) {
			return $this->render_element_placeholder(
				array(
					'title' => esc_html__( 'Not found', 'bricks' ) . ' ( WS Form ) ',
				)
			);
		}

			$settings = $this->settings;

		if ( ! isset( $settings['formSource'] ) ) {
			$form_id = isset( $settings['formSelect'] ) ? $settings['formSelect'] : 0;
		} else {
			$form_id = strstr( $settings['formID'], '{' ) ? $this->render_dynamic_data_tag( $settings['formID'], 'text' ) : $settings['formID'];
		}

		if ( method_exists( '\Bricks\Query', 'is_any_looping' ) ) {

			$query_id = \Bricks\Query::is_any_looping();

			if ( $query_id ) {

				if ( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 2 ) ) {
					$loop_index = \Bricks\Query::get_query_for_element_id( \Bricks\Query::get_query_element_id( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 2 ) ) )->loop_index . '_' . \Bricks\Query::get_query_for_element_id( \Bricks\Query::get_query_element_id( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 1 ) ) )->loop_index . '_' . \Bricks\Query::get_loop_index();
				} elseif ( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 1 ) ) {
						$loop_index = \Bricks\Query::get_query_for_element_id( \Bricks\Query::get_query_element_id( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 1 ) ) )->loop_index . '_' . \Bricks\Query::get_loop_index();
				} else {
					$loop_index = \Bricks\Query::get_loop_index();
				}

				$this->set_attribute( '_root', 'data-x-wsf', $this->id . '_' . $loop_index );

			} else {
				$this->set_attribute( '_root', 'data-x-wsf', $this->id );
			}
		}

		$output = '';

		if ( $form_id > 0 ) {

			$output .= "<div {$this->render_attributes('_root')}>";

				$bricks_iframe = (
					( function_exists( 'bricks_is_builder_preview' ) && bricks_is_builder_preview() ) ||
					( function_exists( 'bricks_is_builder_iframe' ) && bricks_is_builder_iframe() ) ||
					( function_exists( 'bricks_is_builder_call' ) && bricks_is_builder_call() )
				);

				$visual_builder = ( $bricks_iframe || bricks_is_ajax_call() ) ? ' visual_builder="true"' : '';

				$form_shortcode = '[ws_form id="' . esc_attr( $form_id ) . '" element_id="' . esc_attr( $form_id ) . $visual_builder . ']';

				$output .= do_shortcode( $form_shortcode );

			$output .= '</div>';

		} else {

			$output .= $this->render_element_placeholder(
				array(

					'icon-class'  => $this->icon,
					'title'       => esc_html__( 'No form selected', 'ws-form' ),
					'description' => esc_html__( 'Please select a form from the element controls.', 'ws-form' ),

					// Legacy attribute.
					'text'        => esc_html__( 'No form selected', 'ws-form' ),
				)
			);

		}

		echo $output;
	}
}
