, or
tag if missing. text = text.replace( /
([^<]+)<\/(div|address|form)>/g, '
' ); // If an opening or closing block element tag is wrapped in a
, unwrap it. text = text.replace( new RegExp( '
\\s*(<\/?' + allBlocks + '[^>]*>)\\s*<\/p>', 'g' ), '$1' ); // In some cases
may get wrapped in
, fix them. text = text.replace( /
(/g, '$1' ); // If a
is wrapped with a
, move it inside the
. text = text.replace( /
]*)>/gi, '
' ); text = text.replace( /<\/blockquote><\/p>/g, '
' ); // If an opening or closing block element tag is preceded by an opening
tag, remove it. text = text.replace( new RegExp( '
\\s*(<\/?' + allBlocks + '[^>]*>)', 'g' ), '$1' ); // If an opening or closing block element tag is followed by a closing
tag, remove it. text = text.replace( new RegExp( '(<\/?' + allBlocks + '[^>]*>)\\s*<\/p>', 'g' ), '$1' ); // Optionally insert line breaks. if ( br ) { // Replace newlines that shouldn't be touched with a placeholder. text = text.replace( /<(script|style).*?<\/\\1>/g, function( match ) { return match[ 0 ].replace( /\n/g, '' ); } ); // Normalize
text = text.replace( /
|/g, '
' ); // Replace any new line characters that aren't preceded by a
with a
. text = text.replace( /(
)?\s*\n/g, function( a, b ) { return b ? a : '
\n'; } ); // Replace newline placeholders with newlines. text = text.replace( //g, '\n' ); } // If a
tag is after an opening or closing block tag, remove it. text = text.replace( new RegExp( '(<\/?' + allBlocks + '[^>]*>)\\s*
', 'g' ), '$1' ); // If a
tag is before a subset of opening or closing block tags, remove it. text = text.replace( /
(\s*<\/?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)[^>]*>)/g, '$1' ); text = text.replace( /\n<\/p>$/g, '
' ); // Replace placeholder
 tags with their original content.
		if ( Object.keys( preTags ).length ) {
			text = text.replace( new RegExp( Object.keys( preTags ).join( '|' ), 'gi' ), function( matched ) {
				return preTags[ matched ];
			} );
		}

		// Restore newlines in all elements.
		if ( -1 !== text.indexOf( '' ) ) {
			text = text.replace( /\s?\s?/g, '\n' );
		}

		return text;
	},

	/**
	 * Separate HTML elements and comments from the text.
	 *
	 * JS version of the html_split() PHP function and based on the portation
	 * for the Gutenberg block editor.
	 *
	 * @since 2.0
	 * @param  {string} input The text which has to be formatted.
	 * @return {Array}        The formatted text.
	 */
	htmlSplit: function( input ) {
		var parts = [],
			workingInput = input,
			match,
			htmlSplitRegex = ( function() {

				/* eslint-disable no-multi-spaces */
				var comments =
					'!' +           // Start of comment, after the <.
					'(?:' +         // Unroll the loop: Consume everything until --> is found.
						'-(?!->)' + // Dash not followed by end of comment.
						'[^\\-]*' + // Consume non-dashes.
					')*' +          // Loop possessively.
					'(?:-->)?',     // End of comment. If not found, match all input.

					cdata =
					'!\\[CDATA\\[' + // Start of comment, after the <.
					'[^\\]]*' +      // Consume non-].
					'(?:' +          // Unroll the loop: Consume everything until ]]> is found.
						'](?!]>)' +  // One ] not followed by end of comment.
						'[^\\]]*' +  // Consume non-].
					')*?' +          // Loop possessively.
					'(?:]]>)?',      // End of comment. If not found, match all input.

					escaped =
					'(?=' +              // Is the element escaped?
						'!--' +
					'|' +
						'!\\[CDATA\\[' +
					')' +
					'((?=!-)' +          // If yes, which type?
						comments +
					'|' +
						cdata +
					')',

					regex =
					'(' +               // Capture the entire match.
						'<' +           // Find start of element.
						'(' +           // Conditional expression follows.
							escaped +   // Find end of escaped element.
						'|' +           // ... else ...
							'[^>]*>?' + // Find end of normal element.
						')' +
					')';

				return new RegExp( regex );
				/* eslint-enable no-multi-spaces */
			}() );

		while ( ( match = workingInput.match( htmlSplitRegex ) ) ) {
			parts.push( workingInput.slice( 0, match.index ) );
			parts.push( match[ 0 ] );
			workingInput = workingInput.slice( match.index + match[ 0 ].length );
		}

		if ( workingInput.length ) {
			parts.push( workingInput );
		}

		return parts;
	},

	/**
	 * Replace characters or phrases within HTML elements only.
	 *
	 * JS version of the replace_html_tags() PHP function and based on the portation
	 * for the Gutenberg block editor.
	 *
	 * @since 2.0
	 * @param  {string} haystack     The text which has to be formatted.
	 * @param  {Object} replacePairs In the form {from: 'to', ...}.
	 * @return {string}              The formatted text.
	 */
	replaceInHtmlTags: function( haystack, replacePairs ) {

		// Find all elements.
		var textArr = this.htmlSplit( haystack ),
			changed = false,
			needles = Object.keys( replacePairs ), // Extract all needles.
			i, j,
			needle;

		// Loop through delimiters (elements) only.
		for ( i = 1; i < textArr.length; i += 2 ) {
			for ( j = 0; j < needles.length; j++ ) {
				needle = needles[ j ];

				if ( -1 !== textArr[ i ].indexOf( needle ) ) {
					textArr[ i ] = textArr[ i ].replace( new RegExp( needle, 'g' ), replacePairs[ needle ] );
					changed = true;

					// After one strtr() break out of the foreach loop and look at next element.
					break;
				}
			}
		}

		if ( changed ) {
			haystack = textArr.join( '' );
		}

		return haystack;
	},

	/**
	 * Generates filter CSS.
	 *
	 * @since 2.1
	 * @param {Object} values - The values.
	 * @return {String}
	 */
	fusionGetFilterStyle: function( values, state ) {
		var filters = {
			filter_hue: { property: 'hue-rotate', unit: 'deg', default: '0' },
			filter_saturation: { property: 'saturate', unit: '%', default: '100' },
			filter_brightness: { property: 'brightness', unit: '%', default: '100' },
			filter_contrast: { property: 'contrast', unit: '%', default: '100' },
			filter_invert: { property: 'invert', unit: '%', default: '0' },
			filter_sepia: { property: 'sepia', unit: '%', default: '0' },
			filter_opacity: { property: 'opacity', unit: '%', default: '100' },
			filter_blur: { property: 'blur', unit: 'px', default: '0' }
		},
		stateSuffix        = 'regular' === state ? '' : '_hover',
		otherStateSuffix   = 'regular' === state ? '_hover' : '',
		filter_id_state = '',
		filter_id_other = '',
		filter_style    = '';

		_.each( filters, function( filter, filter_id ) {
			filter_id_state = filter_id + stateSuffix;
			filter_id_other = filter_id + otherStateSuffix;
			if ( filter[ 'default' ] !== values[ filter_id_state ] || filter[ 'default' ] !== values[ filter_id_other ] ) {
				filter_style += filter.property + '(' + values[ filter_id_state ] + filter.unit + ') ';
			}
		} );

		return filter_style.trim();
	},

	/**
	 * Generates filter style element.
	 *
	 * @since 2.1
	 * @param {Object} values - The values.
	 * @param {string|object} selector - Element selector.
	 * @param {integer} cid - Element cid.
	 * @return {String}
	 */
	fusionGetFilterStyleElem: function( values, selector, cid ) {
		var filter_style       = '',
			filter_style_hover = '',
			selectorPrefix     = 'body:not(.fusion-disable-element-filters) ',
			regularSelector    = '',
			hoverSelector      = '';

		if ( 'object' === typeof selector ) {
			regularSelector += selector.regular;
			hoverSelector   += selector.hover;
		} else {
			regularSelector += selector;
			hoverSelector   += selector + ':hover';
		}

		// Get filter CSS.
		filter_style = this.fusionGetFilterStyle( values, 'regular' );
		if ( '' !== filter_style ) {
			filter_style = selectorPrefix + regularSelector + '{filter: ' + filter_style + ';}';
		}

		filter_style_hover = this.fusionGetFilterStyle( values, 'hover' );
		if ( '' !== filter_style_hover ) {

			if ( 'parent' === values.filter_hover_element ) {
				if ( regularSelector.includes( 'nested-column-' ) ) {
					hoverSelector = '.fusion-column-wrapper:hover ' + regularSelector;
				} else {
					hoverSelector = '.fusion-builder-row:hover > ' + regularSelector;
				}
			}

			// Add transition.
			filter_style = filter_style.replace( '}', 'transition: filter 0.3s ease-in-out;}' );

			// Hover state.
			filter_style += selectorPrefix + hoverSelector + '{filter: ' + filter_style_hover + ';}';
		}

		// We need empty style element as well.
		return '';
	},

	getFilterVars: function( values ) {
		var filterStyle      = this.fusionGetFilterStyle( values, 'regular' ),
			filterStyleHover = this.fusionGetFilterStyle( values, 'hover' ),
			finalVars        = '';

		if ( '' !== filterStyle ) {
			finalVars += '--awb-filter:' + filterStyle + ';';
		}

		if ( '' !== filterStyleHover ) {
			finalVars += '--awb-filter-transition:filter 0.3s ease;';
			finalVars += '--awb-filter-hover:' + filterStyleHover + ';';

			if ( 'parent' === values.filter_hover_element ) {
				finalVars += '--awb-filter-parent-hover:' + filterStyleHover + ';';
			}
		}

		return finalVars;
	},

	/**
	 * Generates transform CSS.
	 *
	 * @since 3.8
	 * @param {Object} values - The values.
	 * @return {String}
	 */
	fusionGetTransformStyle: function( values, state ) {
		var props = {
			transform_scale_x: { property: 'scaleX', unit: '', default: '1' },
			transform_scale_y: { property: 'scaleY', unit: '', default: '1' },
			transform_translate_x: { property: 'translateX', unit: 'px', default: '0' },
			transform_translate_y: { property: 'translateY', unit: 'px', default: '0' },
			transform_rotate: { property: 'rotate', unit: 'deg', default: '0' },
			transform_skew_x: { property: 'skewX', unit: 'deg', default: '0' },
			transform_skew_y: { property: 'skewY', unit: 'deg', default: '0' }
		},
		stateSuffix        = 'regular' === state ? '' : '_hover',
		otherStateSuffix   = 'regular' === state ? '_hover' : '',
		transform_id_state = '',
		transform_id_other = '',
		transform_style    = '';

		_.each( props, function( transform, transform_id ) {
			transform_id_state = transform_id + stateSuffix;
			transform_id_other = transform_id + otherStateSuffix;
			if ( transform[ 'default' ] !== values[ transform_id_state ] || transform[ 'default' ] !== values[ transform_id_other ] ) {
				transform_style += transform.property + '(' + values[ transform_id_state ] + transform.unit + ') ';
			}
		} );

		return transform_style.trim();
	},

	fusionGetTransformVars: function( values, varName, varNameHover, varNameParentHover ) {
		var transformVar      = this.fusionGetTransformStyle( values, 'regular' ),
			transformVarHover = this.fusionGetTransformStyle( values, 'hover' ),
			transformVars     = '';

		if ( transformVar ) {
			transformVars += varName + ':' + transformVar + ';';
		}
		if ( transformVarHover ) {
			transformVars += varNameHover + ':' + transformVarHover + ';';
			if ( 'parent' === values.transform_hover_element ) {
				transformVars += varNameParentHover + ':' + transformVarHover + ';';
			}
		}

		return transformVars;
	},


	/**
	 * Generates Transition style element.
	 *
	 * @since 3.9
	 * @param {Object} values - The values.
	 * @return {String}
	 */
	fusionGetTransitionStyle: function( values ) {
		const transition_duration = values.transition_duration + 'ms';
		const transition_easing   = 'custom' === values.transition_easing ? values.transition_custom_easing : values.transition_easing;
		const transition_style    = 'filter ' + transition_duration + ' ' + transition_easing + ', transform ' + transition_duration + ' ' + transition_easing + ', background-color ' + transition_duration + ' ' + transition_easing + ', border-color ' + transition_duration + ' ' + transition_easing;

		return transition_style;
	},

	/**
	 * Get pattern.
	 *
	 * @since 3.8
	 * @param {String} name - The selected pattern name.
	 * @param {String} color - The pattern color.
	 * @param {String} style - The pattern style default|inverted.
	 * @return {String}
	 */
	fusionGetPattern( name, color, style ) {
		style = style || 'default';
		color = '' !== color ? jQuery.AWB_Color( color ).toRgbaString() : 'rgba(0,0,0,0.3)';
		const patterns = {
			'abstract': {
				'default': '',
				'inverted': ''
			},

			'bricks': {
				'default': '',
				'inverted': ''
			},

			'circles': {
				'default': '',
				'inverted': ''
			},

			'dots': {
				'default': '',
				'inverted': ''
			},

			'grid': {
				'default': '',
				'inverted': ''
			},

			'hexagon': {
				'default': '',
				'inverted': ''
			},

			'half-diamond': {
				'default': '',
				'inverted': ''
			},

			'half-circle': {
				'default': '',
				'inverted': ''
			},

			'pastel': {
				'default': '',
				'inverted': ''
			},

			'square': {
				'default': '',
				'inverted': ''
			},

			'square-2': {
				'default': '',
				'inverted': ''
			},

			'triangle': {
				'default': '',
				'inverted': ''
			},

			'triangle-2': {
				'default': '',
				'inverted': ''
			},

			'triangle-3': {
				'default': '',
				'inverted': ''
			},

			'wave': {
				'default': '',
				'inverted': ''
			},

			'x': {
				'default': '',
				'inverted': ''
			}
		};

		return patterns[ name ] ? patterns[ name ][ style ] : '';
	},

	/**
	 * Get pattern background element.
	 *
	 * @since 3.8
	 * @param {Object} values - The values.
	 * @return {String}
	 */
	fusionGetPatternElement: function( values ) {
				// Early exit if no pattern selected.
				if ( '' === values.pattern_bg ) {
					return;
				}
				let style = '';
				if ( 'custom' === values.pattern_bg ) {
					style += 'background-image:  url(' + values.pattern_custom_bg + ');';
				} else {
					style += 'background-image:  url(data:image/svg+xml;base64,' + window.btoa( this.fusionGetPattern( values.pattern_bg, values.pattern_bg_color, values.pattern_bg_style ) ) + ');';
				}

				if ( '' !== values.pattern_bg_opacity ) {
					style += 'opacity: ' + ( parseInt( values.pattern_bg_opacity ) / 100 ) + ' ;';
				}
				if ( '' !== values.pattern_bg_size ) {
					style += 'background-size:' + values.pattern_bg_size + ';';
				}
				if ( '' !== values.pattern_bg_blend_mode ) {
					style += 'mix-blend-mode:' + values.pattern_bg_blend_mode + ';';
				}

				const element = '';

				return element;
	},

	/**
	 * Get mask.
	 *
	 * @since 3.8
	 * @param {String} name - The selected mask name.
	 * @param {String} color - The mask color.
	 * @param {String} style - The mask style default|inverted.
	 * @return {String}
	 */
	fusionGetMask( name, color, style, accent_color ) {
		style = style || 'default';
		color = jQuery.AWB_Color( color ).toRgbaString() || 'rgba(255,255,255,1)';
		accent_color = accent_color ? jQuery.AWB_Color( accent_color ).toRgbaString() : color;

		const masks = {
			'mask-1': {
				'default': '',
				'inverted': ''
            },
			'mask-2': {
				'default': '',
				'inverted': ''
            },
			'mask-3': {
				'default': '',
				'inverted': ''
            },
			'mask-4': {
				'default': '',
				'inverted': ''
            },
			'mask-5': {
				'default': '',
				'inverted': ''
            },
			'mask-6': {
				'default': '',
				'inverted': ''
            },
			'mask-7': {
				'default': '',
				'inverted': ''
            },
			'mask-8': {
				'default': '',
				'inverted': ''
            },
			'mask-9': {
				'default': '',
				'inverted': ''
            },
			'mask-10': {
				'default': '',
				'inverted': ''
            },
			'mask-11': {
				'default': '',
				'inverted': ''
            },
			'mask-12': {
				'default': '',
				'inverted': ''
            },
			'mask-13': {
				'default': '',
				'inverted': ''
            },
			'mask-14': {
				'default': '',
				'inverted': ''
            },
			'mask-15': {
				'default': '',
				'inverted': ''
			},
			'mask-16': {
				'default': '',
				'inverted': ''
			}
		};

		return masks[ name ] ? masks[ name ][ style ] : '';
	},

	/**
	 * Get mask background element.
	 *
	 * @since 3.8
	 * @param {Object} values - The values.
	 * @return {String}
	 */
	fusionGetMaskElement: function( values ) {
				// Early exit if no pattern selected.
				if ( '' === values.mask_bg ) {
					return;
				}
				let style = '';
				if ( 'custom' === values.mask_bg ) {
					style += 'background-image:  url(' + values.mask_custom_bg + ');';
				} else {
					style += 'background-image:  url(data:image/svg+xml;base64,' + window.btoa( this.fusionGetMask( values.mask_bg, values.mask_bg_color, values.mask_bg_style, values.mask_bg_accent_color ) ) + ');';
				}

				if ( '' !== values.mask_bg_opacity ) {
					style += 'opacity: ' + ( parseInt( values.mask_bg_opacity ) / 100 ) + ' ;';
				}
				if ( '' !== values.mask_bg_transform ) {
					const transform = values.mask_bg_transform;
					let scaleX = 1;
					let scaleY = 1;

					if ( transform.includes( 'flip-Horizontal' ) ) {
						scaleX = -1;
					}
					if ( transform.includes( 'flip-vertical' ) ) {
						scaleY = -1;
					}

					style += 'transform: scale(' + scaleX + ', ' + scaleY + ');';
				}
				if ( '' !== values.mask_bg_blend_mode ) {
					style += 'mix-blend-mode:' + values.mask_bg_blend_mode + ';';
				}

				const element = '';

				return element;
	},

	/**
	 * Get pattern background element.
	 *
	 * @since 3.8
	 * @param {Object} values - The values.
	 * @return {String}
	 */
	fusionGetBackgroundSliderElement: function( self, type ) {

		const values = self.values;
		// Early exit if no pattern selected.
		if ( 'undefined' === typeof values.background_slider_images || '' === values.background_slider_images ) {
			return;
		}

		const images = '' !== values.background_slider_images ? values.background_slider_images.split( ',' ) : [];
		const attributes = [];

		attributes.push( `data-type="${type}"` );

		if ( '' !== values.background_slider_loop ) {
			attributes.push( `data-loop="${values.background_slider_loop}"` );
		}

		if ( '' !== values.background_slider_animation ) {
			attributes.push( `data-animation="${values.background_slider_animation}"` );
		}

		if ( '' !== values.background_slider_slideshow_speed ) {
			attributes.push( `data-slideshow-speed="${values.background_slider_slideshow_speed}"` );
		}

		if ( '' !== values.background_slider_animation_speed ) {
			attributes.push( `data-animation-speed="${values.background_slider_animation_speed}"` );
		}

		if ( '' !== values.background_slider_direction ) {
			attributes.push( `data-direction="${values.background_slider_direction}"` );
		}

		if ( 'yes' === values.background_slider_pause_on_hover ) {
			attributes.push( `data-pause_on_hover="${values.background_slider_pause_on_hover}"` );
		}

		let inline_style = '';
		if ( '' !== values.background_slider_position ) {
			inline_style += '--awb-image-position:' + values.background_slider_position + ';';
		}

		if ( '' !== values.background_slider_blend_mode ) {
			inline_style += `mix-blend-mode: ${values.background_slider_blend_mode};`;
		}

		if ( '' !== inline_style ) {
			attributes.push( `style="${inline_style}"` );
		}

		let element = '';
		if ( 'column' === type ) {
			let column_inline_style = '';
			if ( '' !== values.background_slider_blend_mode ) {
				let background_color_var = 'var(--awb-bg-color)';
				let background_image_var = 'var(--awb-bg-image)';
				const hover_or_link = ( 'none' !== values.hover_type && '' !== values.hover_type ) || '' !== values.link;

				if ( hover_or_link ) {
					background_color_var = 'var(--awb-inner-bg-color)';
					background_image_var = 'var(--awb-inner-bg-image)';
				}
				column_inline_style += 'background-color:' + background_color_var + ';';

				let background_image = 'background-image: ' + background_image_var + ';';
				if ( values.background_image ) {
					background_image = 'background-image:' + background_image_var + ', url(' + values.background_image + ');';
				}

				column_inline_style += background_image;
			}
			column_inline_style = '' !== column_inline_style ? 'style="' + column_inline_style + '"' : '';
			element += '';
		}

		let slides = '';

		if ( values.background_slider_images.startsWith( 'http' ) ) {
			images.forEach( ( image, idx, array ) => {
				if ( 0 === idx ) {
					slides += '';
				}
				const url = image.split( '|' )[ 0 ];

				slides += '';

				if ( idx === array.length - 1 ) {
					slides += '';
				}
			} );
		} else {
			images.forEach( ( id, idx, array ) => {
				const image = wp.media.attachment( id );

				if ( _.isUndefined( image.get( 'url' ) ) ) {
					image.fetch().then( function() {
						self.reRender();
					} );
				}

				if ( image.get( 'url' ) ) {
					if ( 0 === idx ) {
						slides += '';
					}

					slides += '';

					if ( idx === array.length - 1 ) {
						slides += '';
					}
				}

			} );
		}

		element += '' + slides + '';

		if ( 'column' === type ) {
			element += '';
		}

		return element;
	},

	/**
	 * Generates gradient string for provided options.
	 *
	 * @since 2.1
	 * @param {Object} values - Element params.
	 * @param {string} type - Required gradient string type.
	 * @return {string} - Generated string.
	 */
	getGradientString: function( values, type, size ) {
		var gradientString          = '',
			alphaGradientStartColor = jQuery.AWB_Color( values.gradient_start_color ).alpha(),
			alphaGradientEndColor   = jQuery.AWB_Color( values.gradient_end_color ).alpha(),
			isGradientColor         = ( ! _.isEmpty( values.gradient_start_color ) && 0 !== alphaGradientStartColor ) || ( ! _.isEmpty( values.gradient_end_color ) && 0 !== alphaGradientEndColor ) ? true : false,
			bgKey;

		if ( isGradientColor ) {
			if ( 'linear' === values.gradient_type ) {
				gradientString += 'linear-gradient(' + values.linear_angle + 'deg,';
			} else if ( 'radial' === values.gradient_type ) {
				gradientString += 'radial-gradient(circle at ' + values.radial_direction + ', ';
			}

			gradientString += values.gradient_start_color + ' ' + values.gradient_start_position + '%,';
			gradientString += values.gradient_end_color + ' ' + values.gradient_end_position + '%)';

			switch ( type ) {

			case 'main_bg':
			case 'parallax':
				bgKey = 'background_image';

				if ( size ) {
					bgKey = 'background_image_' + size;
				}

				if ( 'yes' !== values.fade ) {
					gradientString += ',url(\'' + values[ bgKey ] + '\')';
				}
				break;
			case 'fade':
			case 'column':
				bgKey = 'background_image';

				if ( size ) {
					bgKey = 'background_image_' + size;
				}

				gradientString += ',url(\'' + values[ bgKey ] + '\')';
				break;
			}
		}

		return gradientString;
	},

	/**
	 * Generates gradient string for provided options.
	 *
	 * @since 2.1
	 * @param {Object} values - Element params.
	 * @return {string} - Generated string.
	 */
	getGradientFontString: function( values, valueOnly ) {
		var gradientString          = '',
			gradientStart           = 'string' === typeof values.gradient_start_color && '' !== values.gradient_start_color ? values.gradient_start_color : 'rgba(255,255,255,0)',
			gradientEnd             = 'string' === typeof values.gradient_end_color && '' !== values.gradient_end_color ? values.gradient_end_color : 'rgba(255,255,255,0)',
			alphaGradientStartColor = jQuery.AWB_Color( gradientStart ).alpha(),
			alphaGradientEndColor   = jQuery.AWB_Color( gradientEnd ).alpha(),
			isGradientColor         = 0 !== alphaGradientStartColor || 0 !== alphaGradientEndColor;
		if ( 'undefined' === typeof valueOnly ) {
			valueOnly = false;
		}
		if ( isGradientColor ) {
			if ( ! valueOnly ) {
				gradientString += 'background-color:' + gradientStart + ';';

				// Check for type and set accordingly.
				gradientString += 'background-image:';
			}
			if ( 'linear' === values.gradient_type ) {
				gradientString += 'linear-gradient(' + values.linear_angle + 'deg, ';
			} else if ( 'radial' === values.gradient_type ) {
				gradientString += 'radial-gradient(circle at ' + values.radial_direction + ', ';
			}
			gradientString += gradientStart + ' ' + values.gradient_start_position + '%,';
			gradientString += gradientEnd + ' ' + values.gradient_end_position + '%)';

			if ( ! valueOnly ) {
				gradientString += ';';
			}
		}

		return gradientString;
	},

	/**
	 * Generates box-shadow style for provided options.
	 *
	 * @since 2.1
	 * @param {Object} values - The values.
	 * @return {string} - The generated CSS.
	 */
	fusionGetBoxShadowStyle: function( values ) {
		var style = '';

		style += _.fusionGetValueWithUnit( values.box_shadow_horizontal );
		style += ' ' + _.fusionGetValueWithUnit( values.box_shadow_vertical );
		style += ' ' + _.fusionGetValueWithUnit( values.box_shadow_blur );
		style += ' ' + _.fusionGetValueWithUnit( values.box_shadow_spread );
		style += ' ' + values.box_shadow_color;

		if ( 'undefined' !== typeof values.box_shadow_style && '' !== values.box_shadow_style ) {
			style += ' ' + values.box_shadow_style;
		}

		style += ';';

		return style;
	},

	/**
	 * Generates box-shadow CSS var.
	 *
	 * @since 3.9
	 * @param {Object} varName - The variable name.
	 * @param {Object} values - The values.
	 * @return {string} - The generated CSS.
	 */
	awbGetBoxShadowCssVar: function( varName, values ) {
		var style = '';

		if ( 'yes' === values.box_shadow ) {
			style += _.fusionGetValueWithUnit( values.box_shadow_horizontal );
			style += ' ' + _.fusionGetValueWithUnit( values.box_shadow_vertical );
			style += ' ' + _.fusionGetValueWithUnit( values.box_shadow_blur );
			style += ' ' + _.fusionGetValueWithUnit( values.box_shadow_spread );
			style += ' ' + values.box_shadow_color;

			if ( 'undefined' !== typeof values.box_shadow_style && '' !== values.box_shadow_style ) {
				style += ' ' + values.box_shadow_style;
			}

			style = varName + ':' + style + ';';
		}

		return style;
	},

	/**
	 * Generates text-shadow style for provided options.
	 *
	 * @since 2.1
	 * @param {Object} values - The values.
	 * @return {string} - The generated CSS.
	 */
	fusionGetTextShadowStyle: function( values ) {
		var style = '';

		style += _.fusionGetValueWithUnit( values.text_shadow_horizontal );
		style += ' ' + _.fusionGetValueWithUnit( values.text_shadow_vertical );
		style += ' ' + _.fusionGetValueWithUnit( values.text_shadow_blur );
		style += ' ' + values.text_shadow_color;

		return style;
	},

	/**
	 * Get font family styling.
	 *
	 * @since 2.1
	 * @param {string} param_id - Param ID.
	 * @param {Object} values - The values.
	 * @param {string} format - Format of returned value, string or object.
	 * @return {mixed} - The generated styling.
	 */
	fusionGetFontStyle: function( param_id, values, format = 'string', important = false ) {
		var style     = {},
			style_str = '',
			weight    = '';

		if ( 'string' === typeof values[ 'fusion_font_family_' + param_id ] && '' !== values[ 'fusion_font_family_' + param_id ] ) {
			if ( values[ 'fusion_font_family_' + param_id ].includes( 'var(' ) ) {
				style[ 'font-family' ] = values[ 'fusion_font_family_' + param_id ];
				if ( 'object' === typeof window.awbTypographySelect ) {
					style[ 'font-weight' ] = window.awbTypographySelect.getVarString( values[ 'fusion_font_family_' + param_id ], 'font-weight' );
					style[ 'font-style' ]  = window.awbTypographySelect.getVarString( values[ 'fusion_font_family_' + param_id ], 'font-style' );
				}
			} else if ( values[ 'fusion_font_family_' + param_id ].includes( '\'' ) || 'inherit' === values[ 'fusion_font_family_' + param_id ] ) {
				style[ 'font-family' ] = values[ 'fusion_font_family_' + param_id ];
			} else {
				style[ 'font-family' ] = '\'' + values[ 'fusion_font_family_' + param_id ] + '\'';
			}

			if ( 'string' === typeof values[ 'fusion_font_variant_' + param_id ] && '' !== values[ 'fusion_font_variant_' + param_id ] && 'undefined' === typeof style[ 'font-weight' ] ) {
				weight = values[ 'fusion_font_variant_' + param_id ].replace( 'italic', '' );
				if ( weight !== values[ 'fusion_font_variant_' + param_id ] ) {
					style[ 'font-style' ] = 'italic';
				} else {
					style[ 'font-style' ] = 'normal';
				}
				if ( '' !== weight ) {
					style[ 'font-weight' ] = weight;
				}
			}
		}

		if ( 'string' === format ) {
			important = important ? ' !important' : '';
			jQuery.each( style, function( key, value ) {
				style_str += key + ':' + value + important + ';';
			} );

			return style_str;
		}

		return style;
	},

	/**
	 * Checks if valid JSON or not.
	 *
	 * @since 3.0
	 * @param {String} value - The value to check.
	 * @return {Bolean}
	 */
	FusionIsValidJSON: function( value ) {
		try {
			JSON.parse( value );
		} catch ( e ) {
			return false;
		}
		return true;
	},

	/**
	 * Returns sticky class string.
	 *
	 * @since 3.0
	 * @param {String} value - The value to check.
	 * @return {String}
	 */
	fusionGetStickyClass: function( value ) {
		return 'undefined' !== typeof valu && '' !== value && ! value.includes( ',' ) ? ' fusion-display-' + value + '-only' : '';
	},

	/**
	 * Link attributes.
	 *
	 * @since 3.3
	 * @param {Object} attr - Element attributes.
	 * @param {Object} values - Element values.
	 * @return {Object}
	 */
	fusionLinkAttributes: function( attr, values ) {
		var linkAttributes;
		if ( 'undefined' !== typeof values.link_attributes && '' !== values.link_attributes ) {
			linkAttributes = values.link_attributes.split( ' ' );

			_.each( linkAttributes, function( linkAttribute ) {
				var attributeKeyValue = linkAttribute.split( '=' );

				if ( ! _.isUndefined( attributeKeyValue[ 0 ] ) ) {
					if ( ! _.isUndefined( attributeKeyValue[ 1 ] ) ) {
						attributeKeyValue[ 1 ] = attributeKeyValue[ 1 ].trim().replace( /{/g, '[' ).replace( /}/g, ']' ).replace( /'/g, '' ).replace( /&/g, '&' ).replace( //g, '>' ).replace( /"/g, '"' ).trim();

						if ( 'rel' === attributeKeyValue[ 0 ] ) {
							attr.rel += ' ' + attributeKeyValue[ 1 ];
						} else if ( 'string' === typeof attr[ attributeKeyValue[ 0 ] ] ) {
							attr[ attributeKeyValue[ 0 ] ] += ' ' + attributeKeyValue[ 1 ];
						} else {
							attr[ attributeKeyValue[ 0 ] ] = attributeKeyValue[ 1 ];
						}
					} else {
						attr[ attributeKeyValue[ 0 ] ] = 'valueless_attribute';
					}
				}
			} );
		}
		return attr;
	},

	fusionSanitize: function( str ) {

		var map = {
				'À': 'A',
				'Á': 'A',
				'Â': 'A',
				'Ã': 'A',
				'Ä': 'A',
				'Å': 'A',
				'Æ': 'AE',
				'Ç': 'C',
				'È': 'E',
				'É': 'E',
				'Ê': 'E',
				'Ë': 'E',
				'Ì': 'I',
				'Í': 'I',
				'Î': 'I',
				'Ï': 'I',
				'Ð': 'D',
				'Ñ': 'N',
				'Ò': 'O',
				'Ó': 'O',
				'Ô': 'O',
				'Õ': 'O',
				'Ö': 'O',
				'Ø': 'O',
				'Ù': 'U',
				'Ú': 'U',
				'Û': 'U',
				'Ü': 'U',
				'Ý': 'Y',
				'ß': 's',
				'à': 'a',
				'á': 'a',
				'â': 'a',
				'ã': 'a',
				'ä': 'a',
				'å': 'a',
				'æ': 'ae',
				'ç': 'c',
				'è': 'e',
				'é': 'e',
				'ê': 'e',
				'ë': 'e',
				'ì': 'i',
				'í': 'i',
				'î': 'i',
				'ï': 'i',
				'ñ': 'n',
				'ò': 'o',
				'ó': 'o',
				'ô': 'o',
				'õ': 'o',
				'ö': 'o',
				'ø': 'o',
				'ù': 'u',
				'ú': 'u',
				'û': 'u',
				'ü': 'u',
				'ý': 'y',
				'ÿ': 'y',
				'Ā': 'A',
				'ā': 'a',
				'Ă': 'A',
				'ă': 'a',
				'Ą': 'A',
				'ą': 'a',
				'Ć': 'C',
				'ć': 'c',
				'Ĉ': 'C',
				'ĉ': 'c',
				'Ċ': 'C',
				'ċ': 'c',
				'Č': 'C',
				'č': 'c',
				'Ď': 'D',
				'ď': 'd',
				'Đ': 'D',
				'đ': 'd',
				'Ē': 'E',
				'ē': 'e',
				'Ĕ': 'E',
				'ĕ': 'e',
				'Ė': 'E',
				'ė': 'e',
				'Ę': 'E',
				'ę': 'e',
				'Ě': 'E',
				'ě': 'e',
				'Ĝ': 'G',
				'ĝ': 'g',
				'Ğ': 'G',
				'ğ': 'g',
				'Ġ': 'G',
				'ġ': 'g',
				'Ģ': 'G',
				'ģ': 'g',
				'Ĥ': 'H',
				'ĥ': 'h',
				'Ħ': 'H',
				'ħ': 'h',
				'Ĩ': 'I',
				'ĩ': 'i',
				'Ī': 'I',
				'ī': 'i',
				'Ĭ': 'I',
				'ĭ': 'i',
				'Į': 'I',
				'į': 'i',
				'İ': 'I',
				'ı': 'i',
				'Ĳ': 'IJ',
				'ĳ': 'ij',
				'Ĵ': 'J',
				'ĵ': 'j',
				'Ķ': 'K',
				'ķ': 'k',
				'Ĺ': 'L',
				'ĺ': 'l',
				'Ļ': 'L',
				'ļ': 'l',
				'Ľ': 'L',
				'ľ': 'l',
				'Ŀ': 'L',
				'ŀ': 'l',
				'Ł': 'l',
				'ł': 'l',
				'Ń': 'N',
				'ń': 'n',
				'Ņ': 'N',
				'ņ': 'n',
				'Ň': 'N',
				'ň': 'n',
				'ŉ': 'n',
				'Ō': 'O',
				'ō': 'o',
				'Ŏ': 'O',
				'ŏ': 'o',
				'Ő': 'O',
				'ő': 'o',
				'Œ': 'OE',
				'œ': 'oe',
				'Ŕ': 'R',
				'ŕ': 'r',
				'Ŗ': 'R',
				'ŗ': 'r',
				'Ř': 'R',
				'ř': 'r',
				'Ś': 'S',
				'ś': 's',
				'Ŝ': 'S',
				'ŝ': 's',
				'Ş': 'S',
				'ş': 's',
				'Š': 'S',
				'š': 's',
				'Ţ': 'T',
				'ţ': 't',
				'Ť': 'T',
				'ť': 't',
				'Ŧ': 'T',
				'ŧ': 't',
				'Ũ': 'U',
				'ũ': 'u',
				'Ū': 'U',
				'ū': 'u',
				'Ŭ': 'U',
				'ŭ': 'u',
				'Ů': 'U',
				'ů': 'u',
				'Ű': 'U',
				'ű': 'u',
				'Ų': 'U',
				'ų': 'u',
				'Ŵ': 'W',
				'ŵ': 'w',
				'Ŷ': 'Y',
				'ŷ': 'y',
				'Ÿ': 'Y',
				'Ź': 'Z',
				'ź': 'z',
				'Ż': 'Z',
				'ż': 'z',
				'Ž': 'Z',
				'ž': 'z',
				'ſ': 's',
				'ƒ': 'f',
				'Ơ': 'O',
				'ơ': 'o',
				'Ư': 'U',
				'ư': 'u',
				'Ǎ': 'A',
				'ǎ': 'a',
				'Ǐ': 'I',
				'ǐ': 'i',
				'Ǒ': 'O',
				'ǒ': 'o',
				'Ǔ': 'U',
				'ǔ': 'u',
				'Ǖ': 'U',
				'ǖ': 'u',
				'Ǘ': 'U',
				'ǘ': 'u',
				'Ǚ': 'U',
				'ǚ': 'u',
				'Ǜ': 'U',
				'ǜ': 'u',
				'Ǻ': 'A',
				'ǻ': 'a',
				'Ǽ': 'AE',
				'ǽ': 'ae',
				'Ǿ': 'O',
				'ǿ': 'o',
				'α': 'a',
				'Α': 'A',
				'β': 'v',
				'Β': 'V',
				'γ': 'g',
				'Γ': 'G',
				'δ': 'd',
				'Δ': 'D',
				'ε': 'e',
				'Ε': 'E',
				'ζ': 'z',
				'Ζ': 'Z',
				'η': 'i',
				'Η': 'I',
				'θ': 'th',
				'Θ': 'TH',
				'ι': 'i',
				'Ι': 'I',
				'κ': 'k',
				'Κ': 'K',
				'λ': 'l',
				'Λ': 'L',
				'μ': 'm',
				'Μ': 'M',
				'ν': 'n',
				'Ν': 'N',
				'ξ': 'ks',
				'Ξ': 'KS',
				'ο': 'o',
				'Ο': 'O',
				'π': 'p',
				'Π': 'P',
				'ρ': 'r',
				'Ρ': 'R',
				'σ': 's',
				'Σ': 'S',
				'ς': 's',
				'τ': 't',
				'Τ': 'T',
				'υ': 'y',
				'Υ': 'Y',
				'φ': 'f',
				'Φ': 'F',
				'χ': 'x',
				'Χ': 'X',
				'ψ': 'ps',
				'Ψ': 'PS',
				'ω': 'o',
				'Ω': 'O',
				' ': '_',
				'\'': '',
				'?': '',
				'/': '',
				'\\': '',
				'.': '',
				',': '',
				'`': '',
				'>': '',
				'<': '',
				'"': '',
				'[': '',
				']': '',
				'|': '',
				'{': '',
				'}': '',
				'(': '',
				')': ''
			},
			nonWord = /\W/g,
			mapping = function ( c ) {
				return ( map[ c ] !== undefined ) ? map[ c ] : c;
			};
		return str.replace( nonWord, mapping ).toLowerCase();
	}
} );