var FusionPageBuilder = FusionPageBuilder || {};

( function () {


	jQuery( document ).ready( function () {

		// Post Card Cart Component View.
		FusionPageBuilder.fusion_post_card_cart = FusionPageBuilder.ElementView.extend( {

			onInit: function() {
				var params = this.model.get( 'params' );

				// Check for newer margin params.  If unset but regular is, copy from there.
				if ( 'object' === typeof params ) {

					// Split border width into 4.
					if ( 'undefined' === typeof params.button_border_top && 'undefined' !== typeof params.button_border_width && '' !== params.button_border_width ) {
						params.button_border_top    = parseInt( params.button_border_width ) + 'px';
						params.button_border_right  = params.button_border_top;
						params.button_border_bottom = params.button_border_top;
						params.button_border_left   = params.button_border_top;
						delete params.button_border_width;
					}

					// Split border width into 4.
					if ( 'undefined' === typeof params.button_details_border_top && 'undefined' !== typeof params.button_details_border_width && '' !== params.button_details_border_width ) {
						params.button_details_border_top    = parseInt( params.button_details_border_width ) + 'px';
						params.button_details_border_right  = params.button_details_border_top;
						params.button_details_border_bottom = params.button_details_border_top;
						params.button_details_border_left   = params.button_details_border_top;
						delete params.button_details_border_width;
					}
					this.model.set( 'params', params );
				}
			},

			afterPatch: function () {
				var $quantityBoxes = this.$el.find( 'div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)' ).find( '.qty' ),
					$form = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( this.$el.find( '.variations_form' ) );

				if ( $quantityBoxes.length && 'function' === typeof jQuery( '#fb-preview' )[ 0 ].contentWindow.avadaAddQuantityBoxes ) {
					jQuery( '#fb-preview' )[ 0 ].contentWindow.avadaAddQuantityBoxes( '.qty', $quantityBoxes );
				}

				if ( $form.length && 'function' === typeof $form.wc_variation_form ) {
					$form.wc_variation_form();
					$form.on( 'hide_variation', function( e ) {
						jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( e.currentTarget ).find( '.avada-variation' ).closest( 'tr' ).addClass( 'awb-hide-element' );
					} ).on( 'found_variation.wc-variation-form', function( e ) {
						if ( jQuery.trim( jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( e.currentTarget ).find( '.avada-variation' ).text() ).length ) {
							jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( e.currentTarget ).find( '.avada-variation' ).closest( 'tr' ).removeClass( 'awb-hide-element' );
						}
					} );
					this.$el.find( '.awb-post-card-cart-cart-wrapper' ).appendTo( $form );
				}
			},

			/**
			 * Modify template attributes.
			 *
			 * @since 3.3
			 * @param {Object} atts - The attributes.
			 * @return {Object}
			 */
			filterTemplateAtts: function ( atts ) {
				var attributes = {};

				this.values = atts.values;
				this.extras = atts.extras;
				this.query_data = atts.query_data;
				this.setIconDefaults();

				// Validate values.
				this.validateArgs();

				// Any extras that need passed on.
				attributes.cid = this.model.get( 'cid' );
				attributes.wrapperAttr = this.buildAttr( atts.values );
				attributes.output = this.buildOutput( atts );

				return attributes;
			},

			/**
			 * Modify template attributes.
			 *
			 * @since 3.5
			 * @return {void}
			 */
			validateArgs: function() {
				this.values.button_icon = this.values.button_icon.replace( 'fusion-prefix-', '' );

			},

			/**
			 * Set default icons for text links
			 *
			 * @since  3.3
			 */
			setIconDefaults: function() {
				if ( 'custom' !== this.values.button_style ) {
					this.values.icon_position = 'left';
					this.values.button_icon   = 'fa-shopping-cart fas';
				}

				if ( 'custom' !== this.values.product_link_style ) {
					this.values.icon_details_position = 'left';
					this.values.button_details_icon   = 'fa-list-ul fas';
				}
			},

			/**
			 * Builds attributes.
			 *
			 * @since  3.3
			 * @param  {Object} values - The values object.
			 * @return {Object}
			 */
			buildAttr: function ( values ) {
				var attr = _.fusionVisibilityAtts( values.hide_on_mobile, {
					class: 'fusion-woo-cart fusion-post-card-cart',
					style: this.getStyleVars()
				} );

				if ( '' !== values[ 'class' ] ) {
					attr[ 'class' ] += ' ' + values[ 'class' ];
				}

				attr[ 'class' ] += ' awb-variation-layout-' + this.values.variation_layout;
				attr[ 'class' ] += ' awb-variation-clear-' + this.values.variation_clear;
				attr[ 'class' ] += ' awb-label-' + this.values.show_label;

				if ( '' !== values.variation_text_align ) {
					attr[ 'class' ] += ' awb-variation-text-align-' + values.variation_text_align;
				}

				attr[ 'class' ] += ' awb-add-to-cart-style-' + ( '' === this.values.button_style ? 'link' : 'button' );
				attr[ 'class' ] += ' awb-product-style-' + ( '' === this.values.product_link_style ? 'link' : 'button' );

				if ( '' !== values.id ) {
					attr.id = values.id;
				}

				attr = _.fusionAnimations( values, attr );

				return attr;
			},


			/**
			 * Builds output.
			 *
			 * @since  3.3
			 * @param  {Object} values - The values object.
			 * @return {String}
			 */
			buildOutput: function ( atts ) {
				var quantity = '',
						buttons = '',
						output = '';

				if ( 'yes' === atts.values.show_variations && 'variable' === this.getProductType() && 'undefined' !== typeof atts.query_data && 'undefined' !== typeof atts.query_data.fusion_post_card_cart ) {
					output = atts.query_data.fusion_post_card_cart;
				}
				if ( 'yes' === atts.values.show_add_to_cart_button ) {
					buttons += this.buildAddToCart( );
				}
				if ( 'yes' === atts.values.show_product_link_button ) {
					buttons += this.buildProductDetails( );
				}
				if ( 'yes' === atts.values.show_quantity_input ) {
					quantity = this.buildQuantity( );
				}

				// Add wrapper.
				if ( 'yes' === atts.values.show_variations && 'variable' === this.getProductType() ) {
					quantity = '<div class="awb-post-card-cart-cart-wrapper">' + quantity;
				}

				output += quantity;
				if ( this.has_buttons_wrapper() ) {
					output += '<div class="fusion-post-card-cart-button-wrapper">';
				}
				output += buttons;
				if ( this.has_buttons_wrapper() ) {
					output += '</div>';
				}

				// Closing wrapper.
				if ( 'yes' === atts.values.show_variations && 'variable' === this.getProductType() ) {
					output += '</div>';
				}
				return output;
			},

			/**
			 * Builds Quantity
			 *
			 * @since  3.3
			 * @return {String}
			 */
			buildQuantity: function ( ) {
				var output = '<div class="fusion-post-card-cart-quantity">' +
				'<div class="quantity">' +
				'<label class="screen-reader-text" for="quantity_temp">Quis voluptas quos ut in quantity</label>' +
				'<input type="number" id="quantity_temp" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" inputmode="numeric" />' +
				'</div></div>';
				return output;
			},

			/**
			 * Builds Add to cart button
			 *
			 * @since  3.3
			 * @return {String}
			 */
			buildAddToCart: function ( ) {
				var output = '',
					button_class = [ 'fusion-post-card-cart-add-to-cart' ];

				if ( '' === this.values.button_size ) {
					button_class.push( 'fusion-button-default-size' );
				}

				if ( 'custom' === this.values.button_style ) {
					button_class.push( 'button-default' );
				}

				output = '<a href="#" data-quantity="1" class="' + button_class.join( ' ' ) + '" aria-label="Add Temp Product" rel="nofollow">';
				if ( '' !== this.values.button_icon && 'left' === this.values.icon_position ) {
					output += '<i class="' + this.values.button_icon + ' button-icon-left" aria-hidden="true"></i>';
				}
				output += this.extras.add_to_cart_text;
				if ( '' !== this.values.button_icon && 'right' === this.values.icon_position ) {
					output += '<i class="' + this.values.button_icon + ' button-icon-right" aria-hidden="true"></i>';
				}
				output += '</a>';
				return output;
			},

			/**
			 * Builds Details/Quick view button
			 *
			 * @since  3.3
			 * @return {String}
			 */
			buildProductDetails: function ( ) {
				var output = '';
				var button_class = '' === this.values.button_details_size ? ' fusion-button-default-size' : '';
				button_class += 'custom' === this.values.product_link_style ? ' button-default' : '';
				if ( '1' === this.values.enable_quick_view || 'yes' === this.values.enable_quick_view ) {
					output = '<a href="#" class="fusion-post-card-cart-product-link fusion-quick-view' + button_class + '">';
					if ( '' !== this.values.button_details_icon && 'left' === this.values.icon_details_position ) {
						output += '<i class="' + this.values.button_details_icon + ' button-icon-left" aria-hidden="true"></i>';
					}
					output += this.extras.quick_view_text;
					if ( '' !== this.values.button_details_icon && 'right' === this.values.icon_details_position ) {
						output += '<i class="' + this.values.button_details_icon + ' button-icon-right" aria-hidden="true"></i>';
					}
					output += '</a>';
				} else {
					output = '<a href="#" class="fusion-post-card-cart-product-link show_details_button' + button_class + '">';
					if ( '' !== this.values.button_details_icon && 'left' === this.values.icon_details_position ) {
						output += '<i class="' + this.values.button_details_icon + ' button-icon-left" aria-hidden="true"></i>';
					}
					output += this.extras.details_text;
					if ( '' !== this.values.button_details_icon && 'right' === this.values.icon_details_position ) {
						output += '<i class="' + this.values.button_details_icon + ' button-icon-right" aria-hidden="true"></i>';
					}
				output += '</a>';
				}

				return output;
			},

			/**
			 * Checks if buttons wrapper needed
			 *
			 * @since  3.3
			 * @param  {Object} values - The values object.
			 * @return {Boolean}
			 */
			has_buttons_wrapper: function () {
				return ( 'yes' === this.values.show_product_link_button || 'yes' === this.values.show_add_to_cart_button ) &&
					! ( 'floated' === this.values.cart_layout && 'floated' === this.values.buttons_layout && 'no' === this.values.buttons_stretch );
			},

			/**
			 * Builds styles.
			 *
			 * @since  3.3
			 * @param  {Object} values - The values object.
			 * @return {String}
			 */
			getStyleVars: function () {
				var customVars     = {},
					cssVarsOptions = [],
					buttonSizeMap = {
						small: {
							padding: '9px 20px',
							line_height: '14px',
							font_size: '12px'
						},
						medium: {
							padding: '11px 23px',
							line_height: '16px',
							font_size: '13px'
						},
						large: {
							padding: '13px 29px',
							line_height: '17px',
							font_size: '14px'
						},
						xlarge: {
							padding: '17px 40px',
							line_height: '21px',
							font_size: '18px'
						}
					},
					width,
					buttonDimensions;

				cssVarsOptions.margin_top = { 'callback': _.fusionGetValueWithUnit };
				cssVarsOptions.margin_right = { 'callback': _.fusionGetValueWithUnit };
				cssVarsOptions.margin_bottom = { 'callback': _.fusionGetValueWithUnit };
				cssVarsOptions.margin_left = { 'callback': _.fusionGetValueWithUnit };

				if ( 'floated' === this.values.cart_layout ) {
					customVars[ 'justify-content' ] = this.values.justify;
					customVars[ 'align-items' ]     = 'center';
				} else {
					customVars[ 'flex-direction' ] = 'column';
					customVars[ 'align-items' ]    = this.values.align;
				}

				if ( 'yes' === this.values.show_add_to_cart_button ) {
					cssVarsOptions.button_margin_top    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_margin_right  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_margin_bottom = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_margin_left   = { 'callback': _.fusionGetValueWithUnit };
				}

				if ( 'yes' === this.values.show_product_link_button ) {
					cssVarsOptions.button_details_margin_top    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_details_margin_right  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_details_margin_bottom = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_details_margin_left   = { 'callback': _.fusionGetValueWithUnit };
				}

				// Button wrapper if both buttons are used.
				if ( this.has_buttons_wrapper() ) {
					if ( 'floated' === this.values.buttons_layout ) {
						customVars[ 'button-align-items' ] = 'center';
						if ( 'stacked' === this.values.cart_layout ) {
							customVars[ 'button-justify-content' ] = this.values.buttons_justify;
						}
					} else if ( 'stacked' === this.values.buttons_layout ) {
						customVars[ 'button-flex-direction' ] = 'column';
						customVars[ 'button-align-items' ]    = this.values.buttons_alignment;
					}

					// Button wrapper expand full width.
					if ( 'yes' === this.values.buttons_stretch ) {
						customVars[ 'button-a-justify-content' ] = 'center';

						// Stacked buttons next to quantity.
						if ( 'floated' === this.values.cart_layout ) {
							if ( 'stacked' === this.values.buttons_layout ) {

								customVars[ 'button-flex' ]        = '1';
								customVars[ 'button-align-items' ] = 'stretch';
							} else {
								customVars[ 'button-flex' ]   = '1';
								customVars[ 'button-a-flex' ] = '1';
							}
						} else if ( 'stacked' === this.values.buttons_layout ) {
								customVars[ 'button-align-items' ] = 'stretch';
							} else {
								customVars[ 'button-a-flex' ] = '1';
							}
					}
				}

				if ( 'custom' === this.values.quantity_style ) {
					cssVarsOptions.quantity_margin_top    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.quantity_margin_right  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.quantity_margin_bottom = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.quantity_margin_left   = { 'callback': _.fusionGetValueWithUnit };

					// Quantity height.
					if ( ! this.isDefault( 'quantity_height' ) ) {
						customVars[ 'quantity-height' ] = _.fusionGetValueWithUnit( this.values.quantity_height );
					}

					// Quantity width.
					width = '36px';
					if ( ! this.isDefault( 'quantity_width' ) ) {
						width = _.fusionGetValueWithUnit( this.values.quantity_width );

						if ( width.includes( '%' ) ) {
							customVars[ 'quantity-width' ] = 'calc( 100% - var(--awb-quantity-height) - var(--awb-quantity-height) )';
						} else {
							customVars[ 'quantity-width' ] = width;
						}
					}

					// Quantity wrapper.
					if ( ! this.isDefault( 'quantity_width' ) || ! this.isDefault( 'quantity_height' ) ) {
						customVars[ 'quantity-wrapper-width' ] = 'calc( ' + width + ' + var(--awb-quantity-height) + var(--awb-quantity-height) )';
					}

					cssVarsOptions.quantity_radius_top_left     = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.quantity_radius_bottom_left  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.quantity_radius_bottom_right = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.quantity_radius_top_right    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.quantity_font_size           = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.quantity_border_sizes_top    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.quantity_border_sizes_right  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.quantity_border_sizes_bottom = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.quantity_border_sizes_left   = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.push(  'quantity_color' );
					cssVarsOptions.push(  'quantity_background' );
					cssVarsOptions.push(  'quantity_border_color' );
					cssVarsOptions.qbutton_border_sizes_top     = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.qbutton_border_sizes_right   = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.qbutton_border_sizes_bottom  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.qbutton_border_sizes_left    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.push(  'qbutton_color' );
					cssVarsOptions.push(  'qbutton_background' );
					cssVarsOptions.push(  'qbutton_border_color' );
					cssVarsOptions.push(  'qbutton_color_hover' );
					cssVarsOptions.push(  'qbutton_background_hover' );
					cssVarsOptions.push(  'qbutton_border_color_hover' );
				}

				if ( 'custom' === this.values.button_style ) {
					// Button size.
					if ( ! this.isDefault( 'button_size' ) ) {

						if ( 'object' === typeof buttonSizeMap[ this.values.button_size ] ) {
							buttonDimensions                 = buttonSizeMap[ this.values.button_size ];
							customVars[ 'button-padding' ]     = buttonDimensions.padding;
							customVars[ 'button-line-height' ] = buttonDimensions.line_height;
							customVars[ 'button-font-size' ]   = buttonDimensions.font_size;
						}
					}

					cssVarsOptions.button_border_top    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_border_right  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_border_bottom = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_border_left   = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.push( 'button_color' );
					cssVarsOptions.push( 'button_border_color' );
					cssVarsOptions.push( 'button_color_hover' );
					cssVarsOptions.push( 'button_border_color_hover' );

					// Button gradient.
					if ( 'string' === typeof this.values.button_gradient_top && '' !== this.values.button_gradient_top ) {
						cssVarsOptions.push( 'button_gradient_top' );
					}
					if ( 'string' === typeof this.values.button_gradient_bottom && '' !== this.values.button_gradient_bottom ) {
						cssVarsOptions.push( 'button_gradient_bottom' );
					} else if ( 'string' === typeof this.values.button_gradient_top && '' !== this.values.button_gradient_top ) {
						customVars[ 'button-gradient-bottom' ] = this.values.button_gradient_top;
					}

					if ( 'string' === typeof this.values.button_gradient_top_hover && '' !== this.values.button_gradient_top_hover ) {
						cssVarsOptions.push( 'button_gradient_top_hover' );
					}
					if ( 'string' === typeof this.values.button_gradient_bottom_hover && '' !== this.values.button_gradient_bottom_hover ) {
						cssVarsOptions.push( 'button_gradient_bottom_hover' );
					} else if ( 'string' === typeof this.values.button_gradient_top_hover && '' !== this.values.button_gradient_top_hover ) {
						customVars[ 'button-gradient-bottom-hover' ] = this.values.button_gradient_top_hover;
					}
				} else {
					cssVarsOptions.push( 'link_color' );
					cssVarsOptions.push( 'link_hover_color' );
					cssVarsOptions.link_font_size = { 'callback': _.fusionGetValueWithUnit };
				}

				if ( 'custom' === this.values.product_link_style ) {
					// Button size.
					if ( ! this.isDefault( 'button_details_size' ) ) {

						if ( 'object' === typeof buttonSizeMap[ this.values.button_details_size ] ) {
							buttonDimensions                         = buttonSizeMap[ this.values.button_details_size ];
							customVars[ 'button-details-padding' ]     = buttonDimensions.padding;
							customVars[ 'button-details-line-height' ] = buttonDimensions.line_height;
							customVars[ 'button-details-font-size' ]   = buttonDimensions.font_size;
						}
					}

					cssVarsOptions.button_details_border_top    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_details_border_right  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_details_border_bottom = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_details_border_left   = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.push(  'button_details_color' );
					cssVarsOptions.push(  'button_details_border_color' );

					if ( 'string' === typeof this.values.button_details_gradient_top && '' !== this.values.button_details_gradient_top ) {
						cssVarsOptions.push( 'button_details_gradient_top' );
					}
					if ( 'string' === typeof this.values.button_details_gradient_bottom && '' !== this.values.button_details_gradient_bottom ) {
						cssVarsOptions.push( 'button_details_gradient_bottom' );
					} else if ( 'string' === typeof this.values.button_details_gradient_top && '' !== this.values.button_details_gradient_top ) {
						customVars[ 'button-details-gradient-bottom' ] = this.values.button_details_gradient_top;
					}

					if ( 'string' === typeof this.values.button_details_gradient_top_hover && '' !== this.values.button_details_gradient_top_hover ) {
						cssVarsOptions.push( 'button_details_gradient_top_hover' );
					}
					if ( 'string' === typeof this.values.button_details_gradient_bottom_hover && '' !== this.values.button_details_gradient_bottom_hover ) {
						cssVarsOptions.push( 'button_details_gradient_bottom_hover' );
					} else if ( 'string' === typeof this.values.button_details_gradient_top_hover && '' !== this.values.button_details_gradient_top_hover ) {
						customVars[ 'button-details-gradient-bottom-hover' ] = this.values.button_details_gradient_top_hover;
					}

					cssVarsOptions.push( 'button_details_color_hover' );
					cssVarsOptions.push( 'button_details_border_color_hover' );
				} else {
					cssVarsOptions.push( 'product_link_color' );
					cssVarsOptions.push( 'product_link_hover_color' );
					cssVarsOptions.product_link_font_size = { 'callback': _.fusionGetValueWithUnit };
				}

				if ( 'floated' === this.values.variation_layout && ! this.isDefault( 'variation_label_area_width' ) ) {
					cssVarsOptions.variation_label_area_width = { 'callback': _.fusionGetValueWithUnit };
				}

				// Variation Label Typo.
				cssVarsOptions.push( 'label_color' );
				cssVarsOptions.label_font_size      = { 'callback': _.fusionGetValueWithUnit };
				cssVarsOptions.push( 'label_line_height' );
				cssVarsOptions.label_letter_spacing = { 'callback': _.fusionGetValueWithUnit };
				cssVarsOptions.push( 'label_text_transform' );

				// Font family and weight.
				jQuery.each( _.fusionGetFontStyle( 'label_typography', this.values, 'object' ), function( rule, value ) {
					customVars[ 'label-typography-' + rule ] = value;
				} );

				// Select variation type styling.
				if ( ! this.isDefault( 'select_style' ) ) {
					cssVarsOptions.select_height         = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.select_font_size      = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.push( 'select_line_height' );
					cssVarsOptions.select_letter_spacing = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.push( 'select_text_transform' );

					// Font family and weight.
					jQuery.each( _.fusionGetFontStyle( 'select_typography', this.values, 'object' ), function( rule, value ) {
						customVars[ 'select-typography-' + rule ] = value;
					} );

					cssVarsOptions.push( 'select_color' );
					cssVarsOptions.push( 'select_background' );
					cssVarsOptions.push( 'select_border_color' );
					cssVarsOptions.select_border_sizes_top    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.select_border_sizes_right  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.select_border_sizes_bottom = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.select_border_sizes_left   = { 'callback': _.fusionGetValueWithUnit };

					// Border separator with arrow.
					if ( ! this.isDefault( 'select_border_color' ) && ! this.isDefault( 'select_border_sizes_right' ) && ! this.isDefault( 'select_border_sizes_left' ) ) {
						customVars[ 'arrow-border-left' ] = _.fusionGetValueWithUnit( this.values.select_border_sizes_left ) + ' solid ' + this.values.select_border_color;
					}

					cssVarsOptions.border_radius_top_left     = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.border_radius_top_right    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.border_radius_bottom_right = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.border_radius_bottom_left  = { 'callback': _.fusionGetValueWithUnit };
				}

				// Swatch styling if enabled.
				if ( ! this.isDefault( 'swatch_style' ) ) {
					cssVarsOptions.swatch_margin_top          = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.swatch_margin_right        = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.swatch_margin_bottom       = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.swatch_margin_left         = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.push( 'swatch_background_color' );
					cssVarsOptions.push( 'swatch_border_color' );
					cssVarsOptions.push( 'swatch_background_color_active' );
					cssVarsOptions.swatch_border_sizes_top    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.swatch_border_sizes_right  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.swatch_border_sizes_bottom = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.swatch_border_sizes_left   = { 'callback': _.fusionGetValueWithUnit };

					if ( ! this.isDefault( 'swatch_border_color_active' ) ) {
						cssVarsOptions.push( 'swatch_border_color_active' );
						customVars.swatch_border_color_hover = jQuery.AWB_Color( this.values.swatch_border_color_active ).alpha( 0.5 ).toVarOrRgbaString();
					}

					cssVarsOptions.color_swatch_height         = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.color_swatch_padding_top    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.color_swatch_padding_top    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.color_swatch_padding_right  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.color_swatch_padding_bottom = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.color_swatch_padding_left   = { 'callback': _.fusionGetValueWithUnit };

					// Color swatch.
					if ( ! this.isDefault( 'color_swatch_width' ) ) {
						customVars.color_swatch_width =  'auto' === this.values.color_swatch_width ? 'auto' : _.fusionGetValueWithUnit( this.values.color_swatch_width );
					}

					cssVarsOptions.color_swatch_border_radius_top_left     = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.color_swatch_border_radius_top_right    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.color_swatch_border_radius_bottom_right = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.color_swatch_border_radius_bottom_left  = { 'callback': _.fusionGetValueWithUnit };

					// Image swatch.
					cssVarsOptions.image_swatch_height         = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.image_swatch_padding_top    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.image_swatch_padding_right  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.image_swatch_padding_bottom = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.image_swatch_padding_left   = { 'callback': _.fusionGetValueWithUnit };

					if ( ! this.isDefault( 'image_swatch_width' ) ) {
						customVars.color_swatch_width       = 'auto' === this.values.image_swatch_width ? 'auto' : _.fusionGetValueWithUnit( this.values.image_swatch_width );
						customVars.color_swatch_image_width = 'auto' !== this.values.image_swatch_width ? '100%' : 'auto';
					}

					cssVarsOptions.image_swatch_border_radius_top_left     = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.image_swatch_border_radius_top_right    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.image_swatch_border_radius_bottom_right = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.image_swatch_border_radius_bottom_left  = { 'callback': _.fusionGetValueWithUnit };

					// Button swatch.
					cssVarsOptions.button_swatch_height                     = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_swatch_padding_top                = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_swatch_padding_right              = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_swatch_padding_bottom             = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_swatch_padding_left               = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_swatch_border_radius_top_left     = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_swatch_border_radius_top_right    = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_swatch_border_radius_bottom_right = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_swatch_border_radius_bottom_left  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.button_swatch_font_size                  = { 'callback': _.fusionGetValueWithUnit };
					cssVarsOptions.push( 'button_swatch_color' );
					cssVarsOptions.push( 'button_swatch_color_active' );

					if ( ! this.isDefault( 'button_swatch_width' ) ) {
						customVars.button_swatch_width = 'auto' === this.values.button_swatch_width ? 'auto' : _.fusionGetValueWithUnit( this.values.button_swatch_width );
					}
				}

				return this.getCustomCssVars( customVars ) + this.getCssVarsForOptions( cssVarsOptions );
			},

			/**
			 * Get product type.
			 *
			 * @since  3.8.1
			 * @param  {Object} values - The values object.
			 * @return {String}
			 */
			getProductType: function () {
				var product_type = 'simple';

				if ( 'undefined' !== typeof this.query_data && 'undefined' !== typeof this.query_data.product_type ) {
					product_type = this.query_data.product_type;
				}
				return product_type;
			}
		} );
	} );
}( jQuery ) );