<?php
/**
 * Fluent Form element.
 *
 * @package BricksExtras
 */

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

/**
 * Fluent Form element class.
 */
class X_Fluent_Form extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';

	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xfluentform';

	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-layout-media-overlay-alt-2';

	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';

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

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

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

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

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

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

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

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

		$this->control_groups['gdpr_group'] = array(
			'title' => 'GDPR / ' . esc_html__( 'T&Cs', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['checkable_group'] = array(
			'title' => esc_html__( 'Checkable Grid', 'bricksextras' ),
			'tab'   => 'content',
		);

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

		$this->control_groups['progress_group'] = array(
			'title' => esc_html__( 'Progress Bar', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['progress_steps_group'] = array(
			'title' => esc_html__( 'Progress Steps', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['step_group'] = array(
			'title' => esc_html__( 'Step Button', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['netpromoter_group'] = array(
			'title' => esc_html__( 'Net Promotor Score', 'bricksextras' ),
			'tab'   => 'content',
		);

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

		$this->control_groups['success_group'] = array(
			'title' => esc_html__( 'Success', 'bricks' ) . ' / ' . esc_html__( 'Validation Errors', 'bricksextras' ),
			'tab'   => 'content',
		);
	}

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

		/**
		* Form ID
		*/

		$dropdown_options = array();

		if ( function_exists( 'wpFluent' ) ) {

			$fluent_forms = wpFluent()->table( 'fluentform_forms' )
			->select( array( 'id', 'title' ) )
			->orderBy( 'id', 'DESC' )
			->get();

			foreach ( $fluent_forms as $fluentform ) {
				$dropdown_options[ $fluentform->id ] = str_replace( '\'', '', str_replace( ' ', '&#8205; ', $fluentform->title ) );
			}
		} else {
			$dropdown_options['noforms'] = esc_attr( 'No fluent forms' );
		}

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

		$this->controls['fluentFormSelect'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Select form', 'bricksextras' ),
			'type'        => 'select',
			'options'     => $dropdown_options,
			'placeholder' => esc_html__( 'Select form', 'bricksextras' ),
			'default'     => '1',
			'required'    => array( 'formSource', '!=', true ),
		);

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

		/* selectors */

		$group       = '.fluentform .ff-el-group:not(form > *:last-child)';
		$column_cell = '.fluentform .ff-t-cell';

		/* spacing */

		$this->controls['groupMargin'] = array(
			'tab'         => 'content',
			'group'       => 'spacing_group',
			'label'       => esc_html__( 'Gap', 'bricks' ) . ' (' . esc_html__( 'Vertical', 'bricks' ) . ')',
			'type'        => 'number',
			'placeholder' => '20',
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'margin-bottom',
					'selector' => $group,
				),
			),
		);

		$this->controls['cellColumnGap'] = array(
			'tab'         => 'content',
			'group'       => 'spacing_group',
			'label'       => esc_html__( 'Column gap', 'bricks' ),
			'type'        => 'number',
			'placeholder' => '15',
			'units'       => true,
			'css'         => array(
				array(
					'property' => '--x-ff-gap',
					'selector' => '.frm-fluent-form .ff-t-container',
				),
			),
		);

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

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

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

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

		/* inputs / labels */

		$this->controls['inputTypography_start'] = array(
			'tab'         => 'content',
			'group'       => 'inputs_group',
			'type'        => 'separator',
			'description' => esc_html__( 'Typography', 'bricks' ),
		);

		$this->controls['inputTypography'] = array(
			'tab'   => 'content',
			'group' => 'inputs_group',
			'type'  => 'typography',
			'label' => esc_html__( 'Field text', 'bricksextras' ),
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.fluentform .ff-el-group input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file])',
				),
				array(
					'property' => 'font',
					'selector' => '.fluentform .ff-el-group textarea',
				),
				array(
					'property' => 'font',
					'selector' => '.fluentform .ff-el-group select',
				),
			),
		);

		$this->controls['placeholderTypography'] = array(
			'tab'   => 'content',
			'group' => 'inputs_group',
			'type'  => 'typography',
			'label' => esc_html__( 'Placeholder', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.fluentform .ff-el-group input::-webkit-input-placeholder',
				),
				array(
					'property' => 'font',
					'selector' => '.fluentform .ff-el-group textarea::-webkit-input-placeholder',
				),
			),
		);

		$this->controls['labelsTypography'] = array(
			'tab'   => 'content',
			'group' => 'inputs_group',
			'type'  => 'typography',
			'label' => esc_html__( 'Labels', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.fluentform .ff-el-input--label 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' => '.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after',
				),
			),
		);

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

		$this->controls['inputBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'inputs_group',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.fluentform .ff-el-group input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file])',
				),
				array(
					'property' => 'background-color',
					'selector' => '.fluentform .ff-el-group textarea',
				),
				array(
					'property' => 'background-color',
					'selector' => '.fluentform .ff-el-group select',
				),
			),
		);

		$this->controls['inputBorder'] = array(
			'tab'   => 'content',
			'group' => 'inputs_group',
			'type'  => 'border',
			'label' => esc_html__( 'Border', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.fluentform .ff-el-group input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file])',
				),
				array(
					'property' => 'border',
					'selector' => '.fluentform .ff-el-group textarea',
				),
				array(
					'property' => 'border',
					'selector' => '.fluentform .ff-el-group select',
				),
			),
		);

		$this->controls['inputBoxShadow'] = array(
			'tab'   => 'content',
			'group' => 'inputs_group',
			'label' => esc_html__( 'Box shadow', 'bricks' ),
			'type'  => 'box-shadow',
			'css'   => array(
				array(
					'property' => 'box-shadow',
					'selector' => '.fluentform .ff-el-group input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file])',
				),
				array(
					'property' => 'box-shadow',
					'selector' => '.fluentform .ff-el-group textarea',
				),
				array(
					'property' => 'box-shadow',
					'selector' => '.fluentform .ff-el-group select',
				),
			),
		);

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

		$this->controls['inputPadding'] = array(
			'tab'   => 'content',
			'group' => 'inputs_group',
			'label' => esc_html__( 'Padding', 'bricks' ),
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => '.fluentform .ff-el-group input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file])',
				),
				array(
					'property' => 'padding',
					'selector' => '.fluentform .ff-el-group textarea',
				),
				array(
					'property' => 'padding',
					'selector' => '.fluentform .ff-el-group select',
				),
			),
		);

		/* submit */

		$submit = '.fluentform .ff-btn-submit';

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

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

		$this->controls['submitBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'submit_group',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => $submit,
				),
				array(
					'property' => 'background-color',
					'selector' => '.fluentform form .ff-btn-submit:not(.ff_btn_no_style)',
				),

			),
		);

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

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

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

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

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

		$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' => '.fluentform .ff_submit_btn_wrapper',
				),
			),
			'inline'      => true,
			'placeholder' => 'left',
		);

		$this->controls['submitHoverOpacity'] = array(
			'tab'         => 'content',
			'group'       => 'submit_group',
			'label'       => esc_html__( 'Opacity', 'bricks' ) . ' (' . esc_html__( 'Hover', 'bricks' ) . ' / ' . esc_html__( 'Focus', 'bricks' ) . ')',
			'type'        => 'number',
			'css'         => array(
				array(
					'property' => 'opacity',
					'selector' => '.fluentform.ff-default .ff-btn-submit:focus',
				),
				array(
					'property' => 'opacity',
					'selector' => '.fluentform.ff-default .ff-btn-submit:hover',
				),
			),
			'placeholder' => '0.8',
		);

		/* checkbox */

		$checkbox_input          = '&[data-x-fluent-form*=smartUI] input[type="checkbox"]';
		$radio_input             = '&[data-x-fluent-form*=smartUI] input[type="radio"]';
		$checkbox_selected_input = '&[data-x-fluent-form*=smartUI] .ff_item_selected input[type="checkbox"]';
		$radio_selected_input    = '&[data-x-fluent-form*=smartUI] .ff_item_selected input[type="radio"]';
		$checkbox_checked_input  = '&[data-x-fluent-form*=smartUI] .ff-el-group .ff_item_selected input[type=checkbox]::after';
		$radio_checked_input     = '&[data-x-fluent-form*=smartUI] .ff-el-group .ff_item_selected input[type=radio]::after';

		$this->controls['radioCheckboxTypography'] = array(
			'tab'   => 'content',
			'group' => 'checkbox_group',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ) . ' (' . esc_html__( 'Labels', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.ff-el-form-check-label',
				),
			),
		);

		$this->controls['smartUI'] = array(
			'tab'   => 'content',
			'group' => 'checkbox_group',
			'label' => esc_html__( 'Custom checkbox styles', 'bricksextras' ),
			'type'  => 'checkbox',
		);

		$this->controls['radioCheckboxSize'] = array(
			'tab'         => 'content',
			'group'       => 'checkbox_group',
			'label'       => esc_html__( 'Size', 'bricks' ),
			'type'        => 'number',
			'placeholder' => '15px',
			'units'       => true,
			'css'         => array(
				array(
					'property'  => 'width',
					'selector'  => $checkbox_input,
					'important' => 'true',
				),
				array(
					'property'  => 'width',
					'selector'  => $radio_input,
					'important' => 'true',
				),
				array(
					'property' => 'height',
					'selector' => $checkbox_input,
				),
				array(
					'property' => 'height',
					'selector' => $radio_input,
				),
			),
		);

		$this->controls['radioCheckboxPadding'] = array(
			'tab'         => 'content',
			'group'       => 'checkbox_group',
			'label'       => esc_html__( 'Padding', 'bricks' ) . ' (' . esc_html__( 'Input', 'bricks' ) . ')',
			'type'        => 'number',
			'units'       => true,
			'placeholder' => '3px',
			'css'         => array(
				array(
					'property' => 'padding',
					'selector' => '&[data-x-fluent-form*=smartUI] .ff-el-group input[type=radio]',
				),
				array(
					'property' => 'padding',
					'selector' => '&[data-x-fluent-form*=smartUI] .ff-el-group input[type=checkbox]',
				),
			),
		);

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

		$this->controls['radioCheckboxColorChecked'] = array(
			'tab'   => 'content',
			'group' => 'checkbox_group',
			'label' => esc_html__( 'Input indicator', 'bricksextras' ) . ' (' . esc_html__( 'Selected', 'bricks' ) . ')',
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background',
					'selector' => $checkbox_checked_input,
				),
				array(
					'property' => 'background',
					'selector' => $radio_checked_input,
				),
			),
		);

		$this->controls['radioCheckboxColorSelected'] = array(
			'tab'   => 'content',
			'group' => 'checkbox_group',
			'label' => esc_html__( 'Input background', 'bricks' ) . ' (' . esc_html__( 'Selected', 'bricks' ) . ')',
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background',
					'selector' => $checkbox_selected_input,
				),
				array(
					'property' => 'background',
					'selector' => $radio_selected_input,
				),
			),
		);

		$this->controls['radioCheckboxColorSep'] = array(
			'tab'         => 'content',
			'group'       => 'checkbox_group',
			'type'        => 'separator',
			'description' => esc_html__( 'For changing the border radius', 'bricksextras' ),
		);

		$this->controls['checkboxBorder'] = array(
			'tab'    => 'content',
			'group'  => 'checkbox_group',
			'label'  => esc_html__( 'Border', 'bricks' ) . ' (' . esc_html__( 'Checkbox', 'bricks' ) . ')',
			'type'   => 'border',
			'inline' => true,
			'small'  => true,
			'css'    => array(
				array(
					'property' => 'border',
					'selector' => $checkbox_input,
				),
				array(
					'property' => 'border',
					'selector' => $checkbox_input . '::after',
				),

			),
		);

		$this->controls['radioBorder'] = array(
			'tab'    => 'content',
			'group'  => 'checkbox_group',
			'label'  => esc_html__( 'Border', 'bricks' ) . ' (' . esc_html__( 'Radio', 'bricks' ) . ')',
			'type'   => 'border',
			'inline' => true,
			'small'  => true,
			'css'    => array(
				array(
					'property' => 'border',
					'selector' => $radio_input,
				),
			),
		);

		$this->controls['checkboxBorderSep'] = array(
			'type'  => 'separator',
			'label' => esc_html__( 'Checkbox', 'bricks' ),
			'group' => 'checkbox_group',
		);

		$this->controls['checkboxBorderSelected'] = array(
			'tab'    => 'content',
			'group'  => 'checkbox_group',
			'label'  => esc_html__( 'Border', 'bricks' ) . ' (' . esc_html__( 'Dots', 'bricks' ) . ')',
			'type'   => 'border',
			'info'   => esc_html__( 'Dot inside radio input', 'bricksextras' ),
			'inline' => true,
			'small'  => true,
			'css'    => array(
				array(
					'property' => 'border',
					'selector' => $checkbox_checked_input,
				),
			),
		);

		$this->controls['checkboxBorderInputSelected'] = array(
			'tab'    => 'content',
			'group'  => 'checkbox_group',
			'label'  => esc_html__( 'Border', 'bricks' ) . ' (' . esc_html__( 'Selected', 'bricks' ) . ')',
			'type'   => 'border',
			'inline' => true,
			'small'  => true,
			'css'    => array(
				array(
					'property' => 'border',
					'selector' => $checkbox_selected_input,
				),
			),
		);

		$this->controls['radioBorderSep'] = array(
			'type'  => 'separator',
			'label' => esc_html__( 'Radio', 'bricks' ),
			'group' => 'checkbox_group',
		);

		$this->controls['radioBorderSelected'] = array(
			'tab'    => 'content',
			'group'  => 'checkbox_group',
			'label'  => esc_html__( 'Border', 'bricks' ) . ' (' . esc_html__( 'Dots', 'bricks' ) . ')',
			'info'   => esc_html__( 'Dot inside radio input', 'bricksextras' ),
			'type'   => 'border',
			'inline' => true,
			'small'  => true,
			'css'    => array(
				array(
					'property' => 'border',
					'selector' => $radio_checked_input,
				),
			),
		);

		$this->controls['radioBorderInputSelected'] = array(
			'tab'    => 'content',
			'group'  => 'checkbox_group',
			'label'  => esc_html__( 'Border', 'bricks' ) . ' (' . esc_html__( 'Selected', 'bricks' ) . ')',
			'type'   => 'border',
			'inline' => true,
			'small'  => true,
			'css'    => array(
				array(
					'property' => 'border',
					'selector' => $radio_selected_input,
				),
			),
		);

		$radio_button          = '.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span';
		$radio_button_selected = '.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span';

		$this->controls['radioButtonTypeSep'] = array(
			'type'  => 'separator',
			'label' => esc_html__( 'Radio Button Type', 'bricksextras' ),
			'group' => 'checkbox_group',
		);

		$this->controls['radioButtonTypeColor'] = array(
			'tab'    => 'content',
			'group'  => 'checkbox_group',
			'label'  => esc_html__( 'Text color', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'color',
					'selector' => $radio_button,
				),
			),
		);

		$this->controls['radioButtonTypeBgColor'] = array(
			'tab'    => 'content',
			'group'  => 'checkbox_group',
			'label'  => esc_html__( 'Background color', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'background-color',
					'selector' => $radio_button,
				),
			),
		);

		$this->controls['radioButtonTypeBorderColor'] = array(
			'tab'    => 'content',
			'group'  => 'checkbox_group',
			'label'  => esc_html__( 'Border color', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'border-color',
					'selector' => $radio_button,
				),
			),
		);

		$this->controls['radioButtonTypeSelectedSep'] = array(
			'type'  => 'separator',
			'label' => esc_html__( 'Radio - Button Type', 'bricksextras' ) . ' (' . esc_html__( 'Selected', 'bricks' ) . ')',
			'group' => 'checkbox_group',
		);

		$this->controls['radioButtonTypeSelectedColor'] = array(
			'tab'    => 'content',
			'group'  => 'checkbox_group',
			'label'  => esc_html__( 'Text color', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'color',
					'selector' => $radio_button_selected,
				),
			),
		);

		$this->controls['radioButtonTypeBgSelectedColor'] = array(
			'tab'    => 'content',
			'group'  => 'checkbox_group',
			'label'  => esc_html__( 'Background color', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'background-color',
					'selector' => $radio_button_selected,
				),
			),
		);

		$this->controls['radioButtonTypeBorderSelectedColor'] = array(
			'tab'    => 'content',
			'group'  => 'checkbox_group',
			'label'  => esc_html__( 'Border color', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'border-color',
					'selector' => $radio_button_selected,
				),
			),
		);

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

		$this->controls['checkboxMargin'] = array(
			'tab'         => 'content',
			'group'       => 'checkbox_group',
			'label'       => esc_html__( 'Margin', 'bricks' ) . ' (' . esc_html__( 'Checkbox', 'bricks' ) . ' / ' . esc_html__( 'Radio', 'bricks' ) . ')',
			'type'        => 'spacing',
			'css'         => array(
				array(
					'property' => 'margin',
					'selector' => $checkbox_input,
				),
				array(
					'property' => 'margin',
					'selector' => $radio_input,
				),
			),
			'placeholder' => array(
				'right' => '5px',
			),
		);

		$this->controls['checkboxItemsMargin'] = array(
			'tab'         => 'content',
			'group'       => 'checkbox_group',
			'label'       => esc_html__( 'Margin', 'bricks' ) . ' (' . esc_html__( 'Items', 'bricks' ) . ')',
			'type'        => 'spacing',
			'css'         => array(
				array(
					'property' => 'margin',
					'selector' => '.ff-default .ff-el-form-check label.ff-el-form-check-label',
				),
				array(
					'property' => 'margin',
					'selector' => '.ff-el-form-check label.ff-el-form-check-label',
				),
			),
			'placeholder' => array(
				'bottom' => '7px',
			),
		);

		/* gdpr */

		$gdpr_selector = '.fluentform .ff-el-tc label';

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

		$this->controls['gdprLinkTypography'] = array(
			'tab'   => 'content',
			'group' => 'gdpr_group',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ) . ' ( ' . esc_html__( 'Links', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => $gdpr_selector . ' a',
				),
			),
		);

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

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

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

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

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

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

		/* checkable grid */

		$checkable_grid_selector = '.fluentform .ff-checkable-grids';

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

		$this->controls['tableHeadBackground'] = array(
			'tab'   => 'content',
			'group' => 'checkable_group',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Table head', 'bricksextras' ) . ')',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.fluentform .ff-checkable-grids thead>tr>th',
				),
			),
		);

		$this->controls['tableHeadTypography'] = array(
			'tab'   => 'content',
			'group' => 'checkable_group',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ) . ' (' . esc_html__( 'Table head', 'bricksextras' ) . ')',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.fluentform .ff-checkable-grids thead>tr>th',
				),
			),
		);

		$this->controls['tableRowsSep'] = array(
			'tab'   => 'content',
			'group' => 'checkable_group',
			'label' => esc_html__( 'Rows', 'bricks' ),
			'type'  => 'separator',
		);

		$this->controls['tableColor'] = array(
			'tab'   => 'content',
			'group' => 'checkable_group',
			'type'  => 'color',
			'label' => esc_html__( 'Color', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'color',
					'selector' => '.fluentform .ff-checkable-grids tbody>tr>td',
				),
			),
		);

		$this->controls['tableBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'checkable_group',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.fluentform .ff-checkable-grids tbody>tr>td',
				),
			),
		);

		$this->controls['tableAltBackground'] = array(
			'tab'   => 'content',
			'group' => 'checkable_group',
			'type'  => 'color',
			'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Even', 'bricksextras' ) . ')',
			'css'   => array(
				array(
					'property' => 'color',
					'selector' => '.fluentform .ff-checkable-grids tbody>tr:nth-child(2n)>td',
				),
			),
		);

		$this->controls['tableAltBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'checkable_group',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Even', 'bricksextras' ) . ')',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.fluentform .ff-checkable-grids tbody>tr:nth-child(2n)>td',
				),
			),
		);

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

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

		$this->controls['gridPadding'] = array(
			'tab'   => 'content',
			'group' => 'checkable_group',
			'label' => esc_html__( 'Padding', 'bricks' ) . ' (' . esc_html__( 'Table cell', 'bricks' ) . ')',
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => '.fluentform .ff-checkable-grids tbody>tr>td',
				),
			),
		);

		/* uploads */

		$upload_btn = '.fluentform .ff_upload_btn.ff-btn';

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

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

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

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

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

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

		/* progess bar*/

		$progress_bar = '.fluentform .ff-el-progress';

		$this->controls['progressBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'progress_group',
			'type'  => 'color',
			'label' => esc_html__( 'Bar color', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => $progress_bar,
				),
				array(
					'property' => 'background-color',
					'selector' => '.fluentform .ff-step-titles li:after',
				),
			),
		);

		$this->controls['progressActiveBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'progress_group',
			'type'  => 'color',
			'label' => esc_html__( 'Bar color', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.fluentform .ff-el-progress-bar',
				),
				array(
					'property' => 'background-color',
					'selector' => '.fluentform .ff-step-titles li.ff_active:after, .fluentform .ff-step-titles li.ff_completed:after',
				),
			),
		);

		$this->controls['progressHeight'] = array(
			'tab'   => 'content',
			'group' => 'progress_group',
			'label' => esc_html__( 'Bar height', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'height',
					'selector' => $progress_bar,
				),
				array(
					'property' => 'height',
					'selector' => '.fluentform .ff-step-titles li:after',
				),
			),
		);

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

		$this->controls['progressStatusTypography'] = array(
			'tab'   => 'content',
			'group' => 'progress_group',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ) . ' (' . esc_html__( 'Status', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.fluentform .ff-el-progress-status',
				),
			),
		);

		/* progess steps */

		$step_titles_selector        = '.fluentform .ff-step-titles span';
		$step_titles_active_selector = '.fluentform .ff-step-titles li.ff_active span, .fluentform .ff-step-titles li.ff_completed span';
		$step_bar_selector           = '.fluentform .ff-step-titles li.ff_active:before';
		$step_counter_selector       = '.fluentform .ff-step-titles li:before';

		$this->controls['progressTop'] = array(
			'tab'   => 'content',
			'group' => 'progress_steps_group',
			'label' => esc_html__( 'Position', 'bricks' ) . ' (' . esc_html__( 'Top', 'bricks' ) . ')',
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'top',
					'selector' => '.fluentform .ff-step-titles li:after',
				),
			),
		);

		$this->controls['progressStepsCountersSep'] = array(
			'tab'   => 'content',
			'group' => 'progress_steps_group',
			'type'  => 'separator',
			'label' => esc_html__( 'Counter', 'bricks' ),
		);

		$this->controls['progressStepsActiveBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'progress_steps_group',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => $step_bar_selector,
				),
			),
		);

		$this->controls['progressStepsBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'progress_steps_group',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Inactive', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => $step_counter_selector,
				),
			),
		);

		$this->controls['progressStepsActiveColor'] = array(
			'tab'   => 'content',
			'group' => 'progress_steps_group',
			'type'  => 'color',
			'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'color',
					'selector' => $step_bar_selector,
				),
			),
		);

		$this->controls['progressStepsColor'] = array(
			'tab'   => 'content',
			'group' => 'progress_steps_group',
			'type'  => 'color',
			'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Inactive', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'color',
					'selector' => $step_counter_selector,
				),
			),
		);

		$this->controls['progressStepsActiveBorder'] = array(
			'tab'   => 'content',
			'group' => 'progress_steps_group',
			'type'  => 'border',
			'label' => esc_html__( 'Border', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => $step_bar_selector,
				),
			),
		);

		$this->controls['progressStepsBorderColor'] = array(
			'tab'   => 'content',
			'group' => 'progress_steps_group',
			'type'  => 'border',
			'label' => esc_html__( 'Border', 'bricks' ) . ' (' . esc_html__( 'Inactive', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => $step_counter_selector,
				),
			),
		);

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

		$this->controls['progressStepsTitlesSep'] = array(
			'tab'   => 'content',
			'group' => 'progress_steps_group',
			'type'  => 'separator',
			'label' => esc_html__( 'Titles', 'bricksextras' ),
		);

		$this->controls['progressStepsTitlesActiveColor'] = array(
			'tab'   => 'content',
			'group' => 'progress_steps_group',
			'type'  => 'color',
			'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'color',
					'selector' => $step_titles_active_selector,
				),
			),
		);

		$this->controls['progressStepsTitlesColor'] = array(
			'tab'   => 'content',
			'group' => 'progress_steps_group',
			'type'  => 'color',
			'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Inactive', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'color',
					'selector' => $step_titles_selector,
				),
			),
		);

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

		/* step button */

		$step_btn = '.fluentform .ff-btn-secondary';

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

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

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

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

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

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

		/* net promoter group */

		$net_promoter_label = '.fluentform .ff_net_table tbody tr td label';

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

		$this->controls['checkedInitialBackground'] = array(
			'tab'   => 'content',
			'group' => 'netpromoter_group',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.fluentform .ff_net_table tbody tr td',
				),
			),
		);

		$this->controls['checkedBorderColor'] = array(
			'tab'   => 'content',
			'group' => 'netpromoter_group',
			'type'  => 'color',
			'label' => esc_html__( 'Border color', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'border-color',
					'selector' => '.fluentform .ff_net_table tbody tr td',
				),
				array(
					'property' => 'border-color',
					'selector' => '.ff_net_table tbody tr td:first-of-type',
				),
			),
		);

		$this->controls['checkedHoverBorder'] = array(
			'tab'   => 'content',
			'group' => 'netpromoter_group',
			'type'  => 'color',
			'label' => esc_html__( 'Border color', 'bricks' ) . ' (' . esc_html__( 'Hover', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'border-color',
					'selector' => '.fluentform .ff_net_table tbody tr td label:hover:after',
				),
			),
		);

		$this->controls['checkedBackground'] = array(
			'tab'   => 'content',
			'group' => 'netpromoter_group',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Checked', 'bricksextras' ) . ')',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.fluentform .ff_net_table tbody tr td input[type=radio]:checked+label',
				),
			),
		);

		$this->controls['checkedColor'] = array(
			'tab'   => 'content',
			'group' => 'netpromoter_group',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Checked', 'bricksextras' ) . ')',
			'css'   => array(
				array(
					'property' => 'color',
					'selector' => '.fluentform .ff_net_table tbody tr td input[type=radio]:checked+label',
				),
			),
		);

		/* repeater */

		$button_icon = '.repeat_btn .ff-el-repeat-buttons-list svg';

		$this->controls['repeaterIconSize'] = array(
			'tab'   => 'content',
			'group' => 'repeater_group',
			'label' => esc_html__( 'Icon size', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'font-size',
					'selector' => $button_icon,
				),
			),
		);

		$this->controls['repeaterIconColor'] = array(
			'tab'   => 'content',
			'group' => 'repeater_group',
			'type'  => 'color',
			'label' => esc_html__( 'Color', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'fill',
					'selector' => $button_icon,
				),
			),
		);

		/* messages */

		$success_msg = '.fluentform .ff-message-success';
		$error_msg   = '.fluentform .text-danger';

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

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

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

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

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

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

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

		$this->controls['error_start'] = array(
			'tab'   => 'content',
			'group' => 'success_group',
			'type'  => 'separator',
			'label' => esc_html__( 'Validation failed', 'bricks' ),
		);

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

		$this->controls['errorMargin'] = array(
			'tab'   => 'content',
			'group' => 'success_group',
			'label' => esc_html__( 'Margin', 'bricks' ),
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'margin',
					'selector' => $error_msg,
				),
			),
		);
	}


	/**
	 * Enqueue scripts.
	 */
	public function enqueue_scripts() {
		wp_enqueue_style( 'fluentform-public-default' );
		wp_enqueue_style( 'fluent-form-styles' );
		wp_enqueue_script( 'fluent-form-submission' );

		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x-fluent-form', BRICKSEXTRAS_URL . 'components/assets/css/fluentform.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}

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

		if ( ! function_exists( 'wpFluentForm' ) ) {
			return $this->render_element_placeholder(
				array(
					'title' => esc_html__( 'Not found', 'bricks' ) . ' ( FluentForm ) ',
				)
			);
		}

		$form_source = isset( $this->settings['formSource'] ) ? true : false;

		$config = array();

		if ( isset( $this->settings['smartUI'] ) ) {
			$config += array( 'smartUI' => true );
		}

		$this->set_attribute( '_root', 'data-x-fluent-form', wp_json_encode( $config ) );

		$output = '';

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

		$fluent_form_id = isset( $this->settings['fluentFormID'] ) ? $this->settings['fluentFormID'] : false;

		$form_id = '';

		if ( ! $form_source ) {
			$form_id = $this->settings['fluentFormSelect'];
		} elseif ( (bool) $fluent_form_id ) {
				$form_id = strstr( $fluent_form_id, '{' ) ? $this->render_dynamic_data_tag( $fluent_form_id, 'text' ) : $fluent_form_id;
		}

		$output .= do_shortcode( '[fluentform id="' . esc_attr( $form_id ) . '" ]' );

		$output .= '</div>';

		echo $output;
	}
}
