Da

✏️ Editing: kadence-customizer-preview.js

if (!min_value || !max_value || !min_viewport || !max_viewport) {
				return "";
			}

// Convert to rem if needed for consistent calculation
			var min_in_rem = min_value;
			var max_in_rem = max_value;

// Convert px to rem for calculation (but keep original unit in output)
			var output_unit = unit;
			if (unit === "px") {
				min_in_rem = min_value / 16;
				max_in_rem = max_value / 16;
				unit = "rem";
			}

// For rem-based calculations, use the precise formula
			// The formula: preferred = a + b*vw where:
			// b = 1600 * (F2 - F1) / (W2 - W1)
			// a = F1 - (b/1600) * W1
			// This ensures at W1: a + b*(W1/100) = F1 and at W2: a + b*(W2/100) = F2

if (unit === "rem" || unit === "em") {
				var slope =
					(1600 * (max_in_rem - min_in_rem)) /
					(max_viewport - min_viewport);
				var intercept = min_in_rem - (slope / 1600) * min_viewport;

// Round to 4 decimal places for precision
				var rounded_intercept = Math.round(intercept * 10000) / 10000;
				var rounded_slope = Math.round(slope * 10000) / 10000;

// Return clean expression without calc()
				return rounded_intercept + unit + " + " + rounded_slope + "vw";
			}

// For other units (%, vw), use a simpler approach
			var slope =
				((max_value - min_value) / (max_viewport - min_viewport)) * 100;
			var intercept = min_value - (slope * min_viewport) / 100;

var rounded_intercept = Math.round(intercept * 10000) / 10000;
			var rounded_slope = Math.round(slope * 10000) / 10000;

return rounded_intercept + unit + " + " + rounded_slope + "vw";
		},

/**
		 * Generate a clamp value from mobile and desktop sizes
		 *
		 * @param {object} font Font settings object
		 * @return {string} Generated clamp value
		 */
		generate_clamp_value: function (font) {
			var clamped = font.clamped === true;
			if (clamped) {
				var min_value = font.minFontSize;
				var max_value = font.maxFontSize;
				var unit = font.fontSizeUnit || "px";

var preferred =
					this.calculate_preferred_value_with_viewports(font);

if (preferred && min_value && max_value) {
					return (
						"clamp(" +
						min_value +
						unit +
						", " +
						preferred +
						", " +
						max_value +
						unit +
						")"
					);
				}
			}

return "";
		},

live_css_typography: function (key, rules, newValue) {
			var styleID = "kadence-customize-preview-css-" + key,
				$style = $("#" + styleID),
				css = "",
				media_tablet = "@media screen and (max-width: 1023px)",
				media_mobile = "@media screen and (max-width: 499px)",
				selector,
				cssArray = {};

// Create <style> tag if doesn't exist.
			if (0 === $style.length) {
				$style = $(document.createElement("style"));
				$style.attr("id", styleID);
				$style.attr("type", "text/css");

// Append <style> tag to <head>.
				$style.appendTo($("head"));
			}
			_.each(rules, function (rule) {
				if (
					undefined == rule["property"] ||
					undefined == rule["selector"]
				) {
					return;
				}
				rule["media"] = rule["media"] || "global";
				rule["pattern"] = rule["pattern"] || "$";
				if ("object" == typeof newValue) {
					let clamped_value = "";
					if (
						undefined !== newValue["clamped"] &&
						true === newValue["clamped"]
					) {
						clamped_value =
							kadenceCustomizer.generate_clamp_value(newValue);
					}
					if (clamped_value) {
						selector =
							undefined !== rule["selector"]["desktop"]
								? rule["selector"]["desktop"]
								: rule["selector"];
						// Define properties.
						if (undefined == cssArray[rule["media"]])
							cssArray[rule["media"]] = {};
						if (undefined == cssArray[rule["media"]][selector])
							cssArray[rule["media"]][selector] = {};
						cssArray[rule["media"]][selector]["font-size"] =
							clamped_value;
					} else {
						if (
							undefined !== newValue["size"] &&
							"object" == typeof newValue["size"] &&
							"family" !== rule["key"]
						) {
							if (
								undefined !== newValue["size"]["desktop"] &&
								"" !== newValue["size"]["desktop"]
							) {
								selector =
									undefined !== rule["selector"]["desktop"]
										? rule["selector"]["desktop"]
										: rule["selector"];
								// Define properties.
								if (undefined == cssArray[rule["media"]])
									cssArray[rule["media"]] = {};
								if (
									undefined ==
									cssArray[rule["media"]][selector]
								)
									cssArray[rule["media"]][selector] = {};
								var unit =
									undefined !== newValue["sizeType"] &&
									"" !== newValue["sizeType"]
										? newValue["sizeType"]
										: "px";
								cssArray[rule["media"]][selector]["font-size"] =
									newValue["size"]["desktop"] + unit;
							}
							if (
								undefined !== newValue["size"]["tablet"] &&
								"" !== newValue["size"]["tablet"]
							) {
								selector =
									undefined !== rule["selector"]["tablet"]
										? rule["selector"]["tablet"]
										: rule["selector"];
								// Define properties.
								if (undefined == cssArray[media_tablet])
									cssArray[media_tablet] = {};
								if (
									undefined ==
									cssArray[media_tablet][selector]
								)
									cssArray[media_tablet][selector] = {};
								var unit =
									undefined !== newValue["sizeType"] &&
									"" !== newValue["sizeType"]
										? newValue["sizeType"]
										: "px";
								cssArray[media_tablet][selector]["font-size"] =
									newValue["size"]["tablet"] + unit;
							}
							if (
								undefined !== newValue["size"]["mobile"] &&
								"" !== newValue["size"]["mobile"]
							) {
								selector =
									undefined !== rule["selector"]["mobile"]
										? rule["selector"]["mobile"]
										: rule["selector"];
								// Define properties.
								if (undefined == cssArray[media_mobile])
									cssArray[media_mobile] = {};
								if (
									undefined ==
									cssArray[media_mobile][selector]
								)
									cssArray[media_mobile][selector] = {};
								var unit =
									undefined !== newValue["sizeType"] &&
									"" !== newValue["sizeType"]
										? newValue["sizeType"]
										: "px";
								cssArray[media_mobile][selector]["font-size"] =
									newValue["size"]["mobile"] + unit;
							}
						}
					}
					if (
						undefined !== newValue["lineHeight"] &&
						"object" == typeof newValue["lineHeight"] &&
						"family" !== rule["key"]
					) {
						if (
							undefined !== newValue["lineHeight"]["desktop"] &&
							"" !== newValue["lineHeight"]["desktop"]
						) {
							selector =
								undefined !== rule["selector"]["desktop"]
									? rule["selector"]["desktop"]
									: rule["selector"];
							// Define properties.
							if (undefined == cssArray[rule["media"]])
								cssArray[rule["media"]] = {};
							if (undefined == cssArray[rule["media"]][selector])
								cssArray[rule["media"]][selector] = {};
							var unit =
								undefined !== newValue["lineType"] &&
								"" !== newValue["lineType"] &&
								"-" !== newValue["lineType"]
									? newValue["lineType"]
									: "";
							cssArray[rule["media"]][selector]["line-height"] =
								newValue["lineHeight"]["desktop"] + unit;
						}
						if (
							undefined !== newValue["lineHeight"]["tablet"] &&
							"" !== newValue["lineHeight"]["tablet"]
						) {
							selector =
								undefined !== rule["selector"]["tablet"]
									? rule["selector"]["tablet"]
									: rule["selector"];
							// Define properties.
							if (undefined == cssArray[media_tablet])
								cssArray[media_tablet] = {};
							if (undefined == cssArray[media_tablet][selector])
								cssArray[media_tablet][selector] = {};
							var unit =
								undefined !== newValue["lineType"] &&
								"" !== newValue["lineType"] &&
								"-" !== newValue["lineType"]
									? newValue["lineType"]
									: "";
							cssArray[media_tablet][selector]["line-height"] =
								newValue["lineHeight"]["tablet"] + unit;
						}
						if (
							undefined !== newValue["lineHeight"]["mobile"] &&
							"" !== newValue["lineHeight"]["mobile"]
						) {
							selector =
								undefined !== rule["selector"]["mobile"]
									? rule["selector"]["mobile"]
									: rule["selector"];
							// Define properties.
							if (undefined == cssArray[media_mobile])
								cssArray[media_mobile] = {};
							if (undefined == cssArray[media_mobile][selector])
								cssArray[media_mobile][selector] = {};
							var unit =
								undefined !== newValue["lineType"] &&
								"" !== newValue["lineType"] &&
								"-" !== newValue["lineType"]
									? newValue["lineType"]
									: "";
							cssArray[media_mobile][selector]["line-height"] =
								newValue["lineHeight"]["mobile"] + unit;
						}
					}
					if (
						undefined !== newValue["letterSpacing"] &&
						"object" == typeof newValue["letterSpacing"] &&
						"family" !== rule["key"]
					) {
						if (
							undefined !==
								newValue["letterSpacing"]["desktop"] &&
							"" !== newValue["letterSpacing"]["desktop"]
						) {
							selector =
								undefined !== rule["selector"]["desktop"]
									? rule["selector"]["desktop"]
									: rule["selector"];
							// Define properties.
							if (undefined == cssArray[rule["media"]])
								cssArray[rule["media"]] = {};
							if (undefined == cssArray[rule["media"]][selector])
								cssArray[rule["media"]][selector] = {};
							var unit =
								undefined !== newValue["spacingType"] &&
								"" !== newValue["spacingType"]
									? newValue["spacingType"]
									: "";
							cssArray[rule["media"]][selector][
								"letter-spacing"
							] = newValue["letterSpacing"]["desktop"] + unit;
						}
						if (
							undefined !== newValue["letterSpacing"]["tablet"] &&
							"" !== newValue["letterSpacing"]["tablet"]
						) {
							selector =
								undefined !== rule["selector"]["tablet"]
									? rule["selector"]["tablet"]
									: rule["selector"];
							// Define properties.
							if (undefined == cssArray[media_tablet])
								cssArray[media_tablet] = {};
							if (undefined == cssArray[media_tablet][selector])
								cssArray[media_tablet][selector] = {};
							var unit =
								undefined !== newValue["spacingType"] &&
								"" !== newValue["spacingType"]
									? newValue["spacingType"]
									: "";
							cssArray[media_tablet][selector]["letter-spacing"] =
								newValue["letterSpacing"]["tablet"] + unit;
						}
						if (
							undefined !== newValue["letterSpacing"]["mobile"] &&
							"" !== newValue["letterSpacing"]["mobile"]
						) {
							selector =
								undefined !== rule["selector"]["mobile"]
									? rule["selector"]["mobile"]
									: rule["selector"];
							// Define properties.
							if (undefined == cssArray[media_mobile])
								cssArray[media_mobile] = {};
							if (undefined == cssArray[media_mobile][selector])
								cssArray[media_mobile][selector] = {};
							var unit =
								undefined !== newValue["spacingType"] &&
								"" !== newValue["spacingType"]
									? newValue["spacingType"]
									: "";
							cssArray[media_mobile][selector]["letter-spacing"] =
								newValue["letterSpacing"]["mobile"] + unit;
						}
					}
					if (
						undefined !== newValue["family"] &&
						"" !== newValue["family"]
					) {
						selector =
							undefined !== rule["selector"]["desktop"]
								? rule["selector"]["desktop"]
								: rule["selector"];
						// Define properties.
						if (undefined == cssArray[rule["media"]])
							cssArray[rule["media"]] = {};
						if (undefined == cssArray[rule["media"]][selector])
							cssArray[rule["media"]][selector] = {};
						if (
							undefined !== newValue["google"] &&
							newValue["google"] &&
							typeof WebFont !== "undefined" &&
							WebFont
						) {
							var link = newValue["family"];
							if (
								"family" === rule["key"] &&
								newValue["variant"]
							) {
								link += ":" + newValue["variant"].toString();
							} else if (
								newValue["variant"] &&
								"" !== newValue["variant"]
							) {
								link += ":" + newValue["variant"];
							}
							WebFont.load({ google: { families: [link] } });
						}
						cssArray[rule["media"]][selector]["font-family"] =
							"inherit" !== newValue["family"]
								? newValue["family"]
								: "";
					}
					if (
						undefined !== newValue["style"] &&
						"family" !== rule["key"]
					) {
						selector =
							undefined !== rule["selector"]["desktop"]
								? rule["selector"]["desktop"]
								: rule["selector"];
						// Define properties.
						if (undefined == cssArray[rule["media"]])
							cssArray[rule["media"]] = {};
						if (undefined == cssArray[rule["media"]][selector])
							cssArray[rule["media"]][selector] = {};
						cssArray[rule["media"]][selector]["font-style"] =
							newValue["style"];
					}
					if (
						undefined !== newValue["weight"] &&
						"family" !== rule["key"]
					) {
						selector =
							undefined !== rule["selector"]["desktop"]
								? rule["selector"]["desktop"]
								: rule["selector"];
						// Define properties.
						if (undefined == cssArray[rule["media"]])
							cssArray[rule["media"]] = {};
						if (undefined == cssArray[rule["media"]][selector])
							cssArray[rule["media"]][selector] = {};
						cssArray[rule["media"]][selector]["font-weight"] =
							newValue["weight"];
					}
					if (
						undefined !== newValue["transform"] &&
						"" !== newValue["transform"] &&
						"family" !== rule["key"]
					) {
						selector =
							undefined !== rule["selector"]["desktop"]
								? rule["selector"]["desktop"]
								: rule["selector"];
						// Define properties.
						if (undefined == cssArray[rule["media"]])
							cssArray[rule["media"]] = {};
						if (undefined == cssArray[rule["media"]][selector])
							cssArray[rule["media"]][selector] = {};
						cssArray[rule["media"]][selector]["text-transform"] =
							newValue["transform"];
					}
					if (
						undefined !== newValue["color"] &&
						"family" !== rule["key"]
					) {
						selector =
							undefined !== rule["selector"]["desktop"]
								? rule["selector"]["desktop"]
								: rule["selector"];
						// Define properties.
						if (undefined == cssArray[rule["media"]])
							cssArray[rule["media"]] = {};
						if (undefined == cssArray[rule["media"]][selector])
							cssArray[rule["media"]][selector] = {};
						var color_type = "";
						if (newValue["color"].includes("palette")) {
							color_type =
								"var(--global-" + newValue["color"] + ")";
						} else {
							color_type = newValue["color"];
						}
						cssArray[rule["media"]][selector]["color"] = color_type;
					}
				}
			});
			// Loop into the sorted array to build CSS string.
			_.each(cssArray, function (selectors, media) {
				if ("global" !== media) css += media + "{";
				_.each(selectors, function (properties, selector) {
					css += selector + "{";
					_.each(properties, function (value, property) {
						css += property + ":" + value + ";";
					});
					css += "}";
				});
				if ("global" !== media) css += "}";
			});
			// Add CSS string to <style> tag.
			$style.html(css);
		},
		live_css_background: function (key, rules, newValue) {
			var styleID = "kadence-customize-preview-css-" + key,
				$style = $("#" + styleID),
				css = "",
				media_tablet = "@media screen and (max-width: 1023px)",
				media_mobile = "@media screen and (max-width: 499px)",
				selector,
				cssArray = {};

// Create <style> tag if doesn't exist.
			if (0 === $style.length) {
				$style = $(document.createElement("style"));
				$style.attr("id", styleID);
				$style.attr("type", "text/css");

// Append <style> tag to <head>.
				$style.appendTo($("head"));
			}
			_.each(rules, function (rule) {
				if (
					undefined == rule["property"] ||
					undefined == rule["selector"]
				) {
					return;
				}
				rule["media"] = rule["media"] || "global";
				rule["pattern"] = rule["pattern"] || "$";
				if ("object" == typeof newValue) {
					if (undefined !== newValue["desktop"]) {
						selector =
							undefined !== rule["selector"]["desktop"]
								? rule["selector"]["desktop"]
								: rule["selector"];
						// Define properties.
						if (undefined == cssArray[rule["media"]])
							cssArray[rule["media"]] = {};
						if (undefined == cssArray[rule["media"]][selector])
							cssArray[rule["media"]][selector] = {};
						var background_type =
							undefined !== newValue["desktop"]["type"] &&
							"" !== newValue["desktop"]["type"]
								? newValue["desktop"]["type"]
								: "color";
						var color_type = "";
						if (
							undefined !== newValue["desktop"]["color"] &&
							"" !== newValue["desktop"]["color"]
						) {
							if (
								newValue["desktop"]["color"].includes("palette")
							) {
								color_type =
									"var(--global-" +
									newValue["desktop"]["color"] +
									")";
							} else {
								color_type = newValue["desktop"]["color"];
							}
						}
						if ("image" === background_type) {
							var imageValue =
								undefined !== newValue["desktop"]["image"] &&
								undefined !==
									newValue["desktop"]["image"]["url"] &&
								"" !== newValue["desktop"]["image"]["url"]
									? "url(" +
									  newValue["desktop"]["image"]["url"] +
									  ")"
									: false;
							if (imageValue) {
								cssArray[rule["media"]][selector][
									"background-color"
								] = color_type;
								cssArray[rule["media"]][selector][
									"background-image"
								] = imageValue;
								cssArray[rule["media"]][selector][
									"background-repeat"
								] =
									undefined !==
										newValue["desktop"]["image"][
											"repeat"
										] &&
									"" !==
										newValue["desktop"]["image"]["repeat"]
										? newValue["desktop"]["image"]["repeat"]
										: "inherit";
								cssArray[rule["media"]][selector][
									"background-size"
								] =
									undefined !==
										newValue["desktop"]["image"]["size"] &&
									"" !== newValue["desktop"]["image"]["size"]
										? newValue["desktop"]["image"]["size"]
										: "inherit";
								cssArray[rule["media"]][selector][
									"background-position"
								] =
									undefined !==
										newValue["desktop"]["image"][
											"position"
										] &&
									undefined !==
										newValue["desktop"]["image"][
											"position"
										]["x"] &&
									"" !==
										newValue["desktop"]["image"][
											"position"
										]["x"]
										? `${
												newValue["desktop"]["image"][
													"position"
												]["x"] * 100
										  }% ${
												newValue["desktop"]["image"][
													"position"
												]["y"] * 100
										  }%`
										: "center";
								cssArray[rule["media"]][selector][
									"background-attachment"
								] =
									undefined !==
										newValue["desktop"]["image"][
											"attachment"
										] &&
									"" !==
										newValue["desktop"]["image"][
											"attachment"
										]
										? newValue["desktop"]["image"][
												"attachment"
										  ]
										: "inherit";
							} else {
								if ("" !== color_type) {
									cssArray[rule["media"]][selector][
										"background"
									] = color_type;
								}
							}
						} else if ("gradient" === background_type) {
							var gradientValue =
								undefined !== newValue["desktop"]["gradient"] &&
								"" !== newValue["desktop"]["gradient"]
									? newValue["desktop"]["gradient"]
									: false;
							if ("" !== gradientValue) {
								cssArray[rule["media"]][selector][
									"background"
								] = gradientValue;
							}
						} else {
							if ("" !== color_type) {
								cssArray[rule["media"]][selector][
									"background"
								] = color_type;
							}
						}
					}
					if (undefined !== newValue["tablet"]) {
						selector =
							undefined !== rule["selector"]["tablet"]
								? rule["selector"]["tablet"]
								: rule["selector"];
						// Define properties.
						if (undefined == cssArray[media_tablet])
							cssArray[media_tablet] = {};
						if (undefined == cssArray[media_tablet][selector])
							cssArray[media_tablet][selector] = {};
						var background_type =
							undefined !== newValue["tablet"]["type"] &&
							"" !== newValue["tablet"]["type"]
								? newValue["tablet"]["type"]
								: "color";
						var color_type = "";
						if (
							undefined !== newValue["tablet"]["color"] &&
							"" !== newValue["tablet"]["color"]
						) {
							if (
								newValue["tablet"]["color"].includes("palette")
							) {
								color_type =
									"var(--global-" +
									newValue["tablet"]["color"] +
									")";
							} else {
								color_type = newValue["tablet"]["color"];
							}
						}
						if ("image" === background_type) {
							var imageValue =
								undefined !== newValue["tablet"]["image"] &&
								undefined !==
									newValue["tablet"]["image"]["url"] &&
								"" !== newValue["tablet"]["image"]["url"]
									? "url(" +
									  newValue["tablet"]["image"]["url"] +
									  ")"
									: false;
							if (imageValue) {
								cssArray[media_tablet][selector][
									"background-color"
								] = color_type;
								cssArray[media_tablet][selector][
									"background-image"
								] = imageValue;
								cssArray[media_tablet][selector][
									"background-repeat"
								] =
									undefined !==
										newValue["tablet"]["image"]["repeat"] &&
									"" !== newValue["tablet"]["image"]["repeat"]
										? newValue["tablet"]["image"]["repeat"]
										: "inherit";
								cssArray[media_tablet][selector][
									"background-size"
								] =
									undefined !==
										newValue["tablet"]["image"]["size"] &&
									"" !== newValue["tablet"]["image"]["size"]
										? newValue["tablet"]["image"]["size"]
										: "inherit";
								cssArray[media_tablet][selector][
									"background-position"
								] =
									undefined !==
										newValue["tablet"]["image"][
											"position"
										] &&
									undefined !==
										newValue["tablet"]["image"]["position"][
											"x"
										] &&
									"" !==
										newValue["tablet"]["image"]["position"][
											"x"
										]
										? `${
												newValue["tablet"]["image"][
													"position"
												]["x"] * 100
										  }% ${
												newValue["tablet"]["image"][
													"position"
												]["y"] * 100
										  }%`
										: "center";
								cssArray[media_tablet][selector][
									"background-attachment"
								] =
									undefined !==
										newValue["tablet"]["image"][
											"attachment"
										] &&
									"" !==
										newValue["tablet"]["image"][
											"attachment"
										]
										? newValue["tablet"]["image"][
												"attachment"
										  ]
										: "inherit";
							} else {
								if ("" !== color_type) {
									cssArray[media_tablet][selector][
										"background"
									] = color_type;
								}
							}
						} else if ("gradient" === background_type) {
							var gradientValue =
								undefined !== newValue["tablet"]["gradient"] &&
								"" !== newValue["tablet"]["gradient"]
									? newValue["tablet"]["gradient"]
									: false;
							if ("" !== gradientValue) {
								cssArray[rule["media"]][selector][
									"background"
								] = gradientValue;
							}
						} else {
							if ("" !== color_type) {
								cssArray[media_tablet][selector]["background"] =
									color_type;
							}
						}
					}
					if (undefined !== newValue["mobile"]) {
						selector =
							undefined !== rule["selector"]["mobile"]
								? rule["selector"]["mobile"]
								: rule["selector"];
						// Define properties.
						if (undefined == cssArray[media_mobile])
							cssArray[media_mobile] = {};
						if (undefined == cssArray[media_mobile][selector])
							cssArray[media_mobile][selector] = {};
						var background_type =
							undefined !== newValue["mobile"]["type"] &&
							"" !== newValue["mobile"]["type"]
								? newValue["mobile"]["type"]
								: "color";
						var color_type = "";
						if (
							undefined !== newValue["mobile"]["color"] &&
							"" !== newValue["mobile"]["color"]
						) {
							if (
								newValue["mobile"]["color"].includes("palette")
							) {
								color_type =
									"var(--global-" +
									newValue["mobile"]["color"] +
									")";
							} else {
								color_type = newValue["mobile"]["color"];
							}
						}
						if ("image" === background_type) {
							var imageValue =
								undefined !== newValue["mobile"]["image"] &&
								undefined !==
									newValue["mobile"]["image"]["url"] &&
								"" !== newValue["mobile"]["image"]["url"]
									? "url(" +
									  newValue["mobile"]["image"]["url"] +
									  ")"
									: false;
							if (imageValue) {
								cssArray[media_mobile][selector][
									"background-color"
								] = color_type;
								cssArray[media_mobile][selector][
									"background-image"
								] = imageValue;
								cssArray[media_mobile][selector][
									"background-repeat"
								] =
									undefined !==
										newValue["mobile"]["image"]["repeat"] &&
									"" !== newValue["mobile"]["image"]["repeat"]
										? newValue["mobile"]["image"]["repeat"]
										: "inherit";
								cssArray[media_mobile][selector][
									"background-size"
								] =
									undefined !==
										newValue["mobile"]["image"]["size"] &&
									"" !== newValue["mobile"]["image"]["size"]
										? newValue["mobile"]["image"]["size"]
										: "inherit";
								cssArray[media_mobile][selector][
									"background-position"
								] =
									undefined !==
										newValue["mobile"]["image"][
											"position"
										] &&
									undefined !==
										newValue["mobile"]["image"]["position"][
											"x"
										] &&
									"" !==
										newValue["mobile"]["image"]["position"][
											"x"
										]
										? `${
												newValue["mobile"]["image"][
													"position"
												]["x"] * 100
										  }% ${
												newValue["mobile"]["image"][
													"position"
												]["y"] * 100
										  }%`
										: "inherit";
								cssArray[media_mobile][selector][
									"background-attachment"
								] =
									undefined !==
										newValue["mobile"]["image"][
											"attachment"
										] &&
									"" !==
										newValue["mobile"]["image"][
											"attachment"
										]
										? newValue["mobile"]["image"][
												"attachment"
										  ]
										: "inherit";
							} else {
								if ("" !== color_type) {
									cssArray[media_mobile][selector][
										"background"
									] = color_type;
								}
							}
						} else if ("gradient" === background_type) {
							var gradientValue =
								undefined !== newValue["mobile"]["gradient"] &&
								"" !== newValue["mobile"]["gradient"]
									? newValue["mobile"]["gradient"]
									: false;
							if ("" !== gradientValue) {
								cssArray[rule["media"]][selector][
									"background"
								] = gradientValue;
							}
						} else {
							if ("" !== color_type) {
								cssArray[media_mobile][selector]["background"] =
									color_type;
							}
						}
					}
				}
			});
			// Loop into the sorted array to build CSS string.
			_.each(cssArray, function (selectors, media) {
				if ("global" !== media) css += media + "{";
				_.each(selectors, function (properties, selector) {
					css += selector + "{";
					_.each(properties, function (value, property) {
						css += property + ":" + value + ";";
					});
					css += "}";
				});
				if ("global" !== media) css += "}";
			});

// Add CSS string to <style> tag.
			$style.html(css);
		},
		live_css_border: function (key, rules, newValue) {
			var styleID = "kadence-customize-preview-css-" + key,
				$style = $("#" + styleID),
				css = "",
				media_tablet = "@media screen and (max-width: 1023px)",
				media_mobile = "@media screen and (max-width: 499px)",
				selector,
				property,
				cssArray = {};
			// Create <style> tag if doesn't exist.
			if (0 === $style.length) {
				$style = $(document.createElement("style"));
				$style.attr("id", styleID);
				$style.attr("type", "text/css");

// Append <style> tag to <head>.
				$style.appendTo($("head"));
			}
			_.each(rules, function (rule) {
				if (
					undefined == rule["property"] ||
					undefined == rule["selector"]
				) {
					return;
				}
				rule["media"] = rule["media"] || "global";
				rule["pattern"] = rule["pattern"] || "$";
				if ("object" == typeof newValue) {
					if (undefined !== newValue["desktop"]) {
						selector =
							undefined !== rule["selector"]["desktop"]
								? rule["selector"]["desktop"]
								: rule["selector"];
						property =
							undefined !== rule["property"]["desktop"]
								? rule["property"]["desktop"]
								: rule["property"];
						// Define properties.
						if (undefined == cssArray[rule["media"]])
							cssArray[rule["media"]] = {};
						if (undefined == cssArray[rule["media"]][selector])
							cssArray[rule["media"]][selector] = {};
						var border_style =
							undefined !== newValue["desktop"]["style"] &&
							"" !== newValue["desktop"]["style"]
								? newValue["desktop"]["style"]
								: "undefined";
						if ("undefined" !== border_style) {
							var color_type = "";
							if (
								undefined !== newValue["desktop"]["color"] &&
								"" !== newValue["desktop"]["color"]
							) {
								if (
									newValue["desktop"]["color"].includes(
										"palette"
									)
								) {
									color_type =
										"var(--global-" +
										newValue["desktop"]["color"] +
										")";
								} else {
									color_type = newValue["desktop"]["color"];
								}
							}
							if ("" !== color_type) {
								cssArray[rule["media"]][selector][property] =
									(newValue["desktop"]["width"]
										? newValue["desktop"]["width"]
										: "0") +
									newValue["desktop"]["unit"] +
									" " +
									border_style +
									" " +
									color_type;
							} else {
								cssArray[rule["media"]][selector][property] =
									(newValue["desktop"]["width"]
										? newValue["desktop"]["width"]
										: "0") +
									newValue["desktop"]["unit"] +
									" " +
									border_style +
									" " +
									"transparent";
							}
						}
					}
					if (
						undefined !== newValue["tablet"] &&
						undefined !== newValue["tablet"]["width"] &&
						"" !== newValue["tablet"]["width"]
					) {
						selector =
							undefined !== rule["selector"]["tablet"]
								? rule["selector"]["tablet"]
								: rule["selector"];
						property =
							undefined !== rule["property"]["tablet"]
								? rule["property"]["tablet"]
								: rule["property"];
						// Define properties.
						if (undefined == cssArray[media_tablet])
							cssArray[media_tablet] = {};
						if (undefined == cssArray[media_tablet][selector])
							cssArray[media_tablet][selector] = {};
						var tablet_border_style =
							undefined !== newValue["tablet"]["style"] &&
							"" !== newValue["tablet"]["style"]
								? newValue["tablet"]["style"]
								: "";
						var desktop_border_style =
							undefined !== newValue["desktop"]["style"] &&
							"" !== newValue["desktop"]["style"]
								? newValue["desktop"]["style"]
								: "";
						var border_style = "undefined";
						if ("" !== tablet_border_style) {
							border_style = tablet_border_style;
						} else if ("" !== desktop_border_style) {
							border_style = desktop_border_style;
						}
						if ("undefined" !== border_style) {
							var color_type = "";
							var width = newValue["desktop"]["width"]
								? newValue["desktop"]["width"]
								: "0";
							var unit = newValue["desktop"]["unit"]
								? newValue["desktop"]["unit"]
								: "px";
							if (
								undefined !== newValue["tablet"]["color"] &&
								"" !== newValue["tablet"]["color"]
							) {
								if (
									newValue["tablet"]["color"].includes(
										"palette"
									)
								) {
									color_type =
										"var(--global-" +
										newValue["tablet"]["color"] +
										")";
								} else {
									color_type = newValue["tablet"]["color"];
								}
							} else if (
								undefined !== newValue["desktop"]["color"] &&
								"" !== newValue["desktop"]["color"]
							) {
								if (
									newValue["desktop"]["color"].includes(
										"palette"
									)
								) {
									color_type =
										"var(--global-" +
										newValue["desktop"]["color"] +
										")";
								} else {
									color_type = newValue["desktop"]["color"];
								}
							}
							if ("" !== color_type) {
								cssArray[media_tablet][selector][property] =
									("" !== newValue["tablet"]["width"]
										? newValue["tablet"]["width"]
										: width) +
									(newValue["tablet"]["unit"]
										? newValue["tablet"]["unit"]
										: unit) +
									" " +
									border_style +
									" " +
									color_type;
							} else {
								cssArray[media_tablet][selector][property] =
									("" !== newValue["tablet"]["width"]
										? newValue["tablet"]["width"]
										: width) +
									(newValue["tablet"]["unit"]
										? newValue["tablet"]["unit"]
										: unit) +
									" " +
									border_style +
									" " +
									"transparent";
							}
						}
					}
					if (
						undefined !== newValue["mobile"] &&
						undefined !== newValue["mobile"]["width"] &&
						"" !== newValue["mobile"]["width"]
					) {
						selector =
							undefined !== rule["selector"]["mobile"]
								? rule["selector"]["mobile"]
								: rule["selector"];
						property =
							undefined !== rule["property"]["mobile"]
								? rule["property"]["mobile"]
								: rule["property"];
						// Define properties.
						if (undefined == cssArray[media_mobile])
							cssArray[media_mobile] = {};
						if (undefined == cssArray[media_mobile][selector])
							cssArray[media_mobile][selector] = {};
						var mobile_border_style =
							undefined !== newValue["mobile"]["style"] &&
							"" !== newValue["mobile"]["style"]
								? newValue["mobile"]["style"]
								: "";
						var tablet_border_style =
							undefined !== newValue?.["tablet"]?.["style"] &&
							"" !== newValue?.["tablet"]?.["style"]
								? newValue["tablet"]["style"]
								: "";
						var desktop_border_style =
							undefined !== newValue?.["desktop"]?.["style"] &&
							"" !== newValue?.["desktop"]?.["style"]
								? newValue["desktop"]["style"]
								: "";
						var border_style = "undefined";
						if ("" !== mobile_border_style) {
							border_style = mobile_border_style;
						} else if ("" !== tablet_border_style) {
							border_style = tablet_border_style;
						} else if ("" !== desktop_border_style) {
							border_style = desktop_border_style;
						}
						if ("undefined" !== border_style) {
							var color_type = "";
							var deskWidth = newValue["desktop"]["width"]
								? newValue["desktop"]["width"]
								: "0";
							var deskUnit = newValue["desktop"]["unit"]
								? newValue["desktop"]["unit"]
								: "px";
							var width =
								newValue["tablet"] &&
								newValue["tablet"]["width"]
									? newValue["tablet"]["width"]
									: deskWidth;
							var unit =
								newValue["tablet"] && newValue["tablet"]["unit"]
									? newValue["tablet"]["unit"]
									: deskUnit;
							if (
								undefined !== newValue["mobile"]["color"] &&
								"" !== newValue["mobile"]["color"]
							) {
								if (
									newValue["mobile"]["color"].includes(
										"palette"
									)
								) {
									color_type =
										"var(--global-" +
										newValue["mobile"]["color"] +
										")";
								} else {
									color_type = newValue["mobile"]["color"];
								}
							} else if (
								undefined !== newValue["tablet"] &&
								undefined !== newValue["tablet"]["color"] &&
								"" !== newValue["tablet"]["color"]
							) {
								if (
									newValue["tablet"]["color"].includes(
										"palette"
									)
								) {
									color_type =
										"var(--global-" +
										newValue["tablet"]["color"] +
										")";
								} else {
									color_type = newValue["tablet"]["color"];
								}
							} else if (
								undefined !== newValue["desktop"]["color"] &&
								"" !== newValue["desktop"]["color"]
							) {
								if (
									newValue["desktop"]["color"].includes(
										"palette"
									)
								) {
									color_type =
										"var(--global-" +
										newValue["desktop"]["color"] +
										")";
								} else {
									color_type = newValue["desktop"]["color"];
								}
							}
							if ("" !== color_type) {
								cssArray[media_mobile][selector][property] =
									("" !== newValue["mobile"]["width"]
										? newValue["mobile"]["width"]
										: width) +
									(newValue["mobile"]["unit"]
										? newValue["mobile"]["unit"]
										: unit) +
									" " +
									border_style +
									" " +
									color_type;
							} else {
								cssArray[media_mobile][selector][property] =
									("" !== newValue["mobile"]["width"]
										? newValue["mobile"]["width"]
										: width) +
									(newValue["mobile"]["unit"]
										? newValue["mobile"]["unit"]
										: unit) +
									" " +
									border_style +
									" " +
									"transparent";
							}
						}
					}
					if (undefined !== newValue["style"]) {
						selector = rule["selector"];
						property = rule["property"];
						// Define properties.
						if (undefined == cssArray[rule["media"]])
							cssArray[rule["media"]] = {};
						if (undefined == cssArray[rule["media"]][selector])
							cssArray[rule["media"]][selector] = {};

// Add CSS string to <style> tag.
			$style.html(css);
		},
		live_css_boxshadow: function (key, rules, newValue) {
			var styleID = "kadence-customize-preview-css-" + key,
				$style = $("#" + styleID),
				css = "",
				media_tablet = "@media screen and (max-width: 1023px)",
				media_mobile = "@media screen and (max-width: 499px)",
				selector,
				property,
				cssArray = {};
			// Create <style> tag if doesn't exist.
			if (0 === $style.length) {
				$style = $(document.createElement("style"));
				$style.attr("id", styleID);
				$style.attr("type", "text/css");

if (newValue?.disabled) {
					selector = rule["selector"];
					property = rule["property"];
					if (undefined == cssArray[rule["media"]])
						cssArray[rule["media"]] = {};
					if (undefined == cssArray[rule["media"]][selector])
						cssArray[rule["media"]][selector] = {};
					cssArray[rule["media"]][selector][property] = "none";
				} else if ("object" == typeof newValue) {
					if (undefined !== newValue["desktop"]) {
						selector =
							undefined !== rule["selector"]["desktop"]
								? rule["selector"]["desktop"]
								: rule["selector"];
						property =
							undefined !== rule["property"]["desktop"]
								? rule["property"]["desktop"]
								: rule["property"];
						// Define properties.
						if (undefined == cssArray[rule["media"]])
							cssArray[rule["media"]] = {};
						if (undefined == cssArray[rule["media"]][selector])
							cssArray[rule["media"]][selector] = {};
						var border_style =
							undefined !== newValue["desktop"]["style"] &&
							"" !== newValue["desktop"]["style"]
								? newValue["desktop"]["style"]
								: "undefined";
						if ("undefined" !== border_style) {
							var color_type = "";
							if (
								undefined !== newValue["desktop"]["color"] &&
								"" !== newValue["desktop"]["color"]
							) {
								if (
									newValue["desktop"]["color"].includes(
										"palette"
									)
								) {
									color_type =
										"var(--global-" +
										newValue["desktop"]["color"] +
										")";
								} else {
									color_type = newValue["desktop"]["color"];
								}
							}
							if ("" !== color_type) {
								cssArray[rule["media"]][selector][property] =
									(newValue["desktop"]["width"]
										? newValue["desktop"]["width"]
										: "0") +
									newValue["desktop"]["unit"] +
									" " +
									border_style +
									" " +
									color_type;
							} else {
								cssArray[rule["media"]][selector][property] =
									(newValue["desktop"]["width"]
										? newValue["desktop"]["width"]
										: "0") +
									newValue["desktop"]["unit"] +
									" " +
									border_style +
									" " +
									"transparent";
							}
						}
					}
					if (undefined !== newValue["tablet"]) {
						selector =
							undefined !== rule["selector"]["tablet"]
								? rule["selector"]["tablet"]
								: rule["selector"];
						property =
							undefined !== rule["property"]["tablet"]
								? rule["property"]["tablet"]
								: rule["property"];
						// Define properties.
						if (undefined == cssArray[media_tablet])
							cssArray[media_tablet] = {};
						if (undefined == cssArray[media_tablet][selector])
							cssArray[media_tablet][selector] = {};
						var border_style =
							undefined !== newValue["tablet"]["style"] &&
							"" !== newValue["tablet"]["style"]
								? newValue["tablet"]["style"]
								: newValue["desktop"]["style"];
						var border_style_show =
							undefined !== newValue["tablet"]["style"] &&
							"" !== newValue["tablet"]["style"]
								? newValue["tablet"]["style"]
								: "undefined";
						if ("undefined" !== border_style_show) {
							var color_type = "";
							var width = newValue["desktop"]["width"]
								? newValue["desktop"]["width"]
								: "0";
							var unit = newValue["desktop"]["unit"]
								? newValue["desktop"]["unit"]
								: "px";
							if (
								undefined !== newValue["tablet"]["color"] &&
								"" !== newValue["tablet"]["color"]
							) {
								if (
									newValue["tablet"]["color"].includes(
										"palette"
									)
								) {
									color_type =
										"var(--global-" +
										newValue["tablet"]["color"] +
										")";
								} else {
									color_type = newValue["tablet"]["color"];
								}
							} else if (
								undefined !== newValue["desktop"]["color"] &&
								"" !== newValue["desktop"]["color"]
							) {
								if (
									newValue["desktop"]["color"].includes(
										"palette"
									)
								) {
									color_type =
										"var(--global-" +
										newValue["desktop"]["color"] +
										")";
								} else {
									color_type = newValue["desktop"]["color"];
								}
							}
							if ("" !== color_type) {
								cssArray[media_tablet][selector][property] =
									(newValue["tablet"]["width"]
										? newValue["tablet"]["width"]
										: width) +
									(newValue["tablet"]["unit"]
										? newValue["tablet"]["unit"]
										: unit) +
									" " +
									border_style +
									" " +
									color_type;
							} else {
								cssArray[media_tablet][selector][property] =
									(newValue["tablet"]["width"]
										? newValue["tablet"]["width"]
										: width) +
									(newValue["tablet"]["unit"]
										? newValue["tablet"]["unit"]
										: unit) +
									" " +
									border_style +
									" " +
									"transparent";
							}
						}
					}
					if (undefined !== newValue["mobile"]) {
						selector =
							undefined !== rule["selector"]["mobile"]
								? rule["selector"]["mobile"]
								: rule["selector"];
						property =
							undefined !== rule["property"]["mobile"]
								? rule["property"]["mobile"]
								: rule["property"];
						// Define properties.
						if (undefined == cssArray[media_mobile])
							cssArray[media_mobile] = {};
						if (undefined == cssArray[media_mobile][selector])
							cssArray[media_mobile][selector] = {};
						var border_style =
							undefined !== newValue["mobile"]["style"] &&
							"" !== newValue["mobile"]["style"]
								? newValue["mobile"]["style"]
								: newValue["desktop"]["style"];
						var border_style_show =
							undefined !== newValue["mobile"]["style"] &&
							"" !== newValue["mobile"]["style"]
								? newValue["mobile"]["style"]
								: "undefined";
						if ("undefined" !== border_style_show) {
							var color_type = "";
							var deskWidth = newValue["desktop"]["width"]
								? newValue["desktop"]["width"]
								: "0";
							var deskUnit = newValue["desktop"]["unit"]
								? newValue["desktop"]["unit"]
								: "px";
							var width =
								newValue["tablet"] &&
								newValue["tablet"]["width"]
									? newValue["tablet"]["width"]
									: deskWidth;
							var unit =
								newValue["tablet"] && newValue["tablet"]["unit"]
									? newValue["tablet"]["unit"]
									: deskUnit;
							if (
								undefined !== newValue["mobile"]["color"] &&
								"" !== newValue["mobile"]["color"]
							) {
								if (
									newValue["mobile"]["color"].includes(
										"palette"
									)
								) {
									color_type =
										"var(--global-" +
										newValue["mobile"]["color"] +
										")";
								} else {
									color_type = newValue["mobile"]["color"];
								}
							} else if (
								undefined !== newValue["tablet"] &&
								undefined !== newValue["tablet"]["color"] &&
								"" !== newValue["tablet"]["color"]
							) {
								if (
									newValue["tablet"]["color"].includes(
										"palette"
									)
								) {
									color_type =
										"var(--global-" +
										newValue["tablet"]["color"] +
										")";
								} else {
									color_type = newValue["tablet"]["color"];
								}
							} else if (
								undefined !== newValue["desktop"]["color"] &&
								"" !== newValue["desktop"]["color"]
							) {
								if (
									newValue["desktop"]["color"].includes(
										"palette"
									)
								) {
									color_type =
										"var(--global-" +
										newValue["desktop"]["color"] +
										")";
								} else {
									color_type = newValue["desktop"]["color"];
								}
							}
							if ("" !== color_type) {
								cssArray[media_mobile][selector][property] =
									(newValue["mobile"]["width"]
										? newValue["mobile"]["width"]
										: width) +
									(newValue["mobile"]["unit"]
										? newValue["mobile"]["unit"]
										: unit) +
									" " +
									border_style +
									" " +
									color_type;
							} else {
								cssArray[media_mobile][selector][property] =
									(newValue["mobile"]["width"]
										? newValue["mobile"]["width"]
										: width) +
									(newValue["mobile"]["unit"]
										? newValue["mobile"]["unit"]
										: unit) +
									" " +
									border_style +
									" " +
									"transparent";
							}
						}
					}
					if (undefined !== newValue["color"]) {
						selector = rule["selector"];
						property = rule["property"];
						// Define properties.
						if (undefined == cssArray[rule["media"]])
							cssArray[rule["media"]] = {};
						if (undefined == cssArray[rule["media"]][selector])
							cssArray[rule["media"]][selector] = {};

// Add CSS string to <style> tag.
			$style.html(css);
		},
		live_css: function (key, rules, newValue) {
			if (rules?.[0]?.["id"] === "base_font_family") {
				key = "base_font_family";
			}
			var styleID = "kadence-customize-preview-css-" + key,
				$style = $("#" + styleID),
				css = "",
				media_tablet = "@media screen and (max-width: 1023px)",
				media_mobile = "@media screen and (max-width: 499px)",
				cssArray = {};

// Create <style> tag if doesn't exist.
			if (0 === $style.length) {
				$style = $(document.createElement("style"));
				$style.attr("id", styleID);
				$style.attr("type", "text/css");

// Append <style> tag to <head>.
				$style.appendTo($("head"));
			}
			_.each(rules, function (rule) {
				var formattedValue;
				if (
					undefined == rule["property"] ||
					undefined == rule["selector"]
				) {
					return;
				}
				rule["media"] = rule["media"] || "global";
				rule["pattern"] = rule["pattern"] || "$";
				if ("object" == typeof newValue) {
					if (
						undefined !== rule["key"] &&
						"measure" === rule["key"]
					) {
						if (
							"object" == typeof newValue["size"] &&
							undefined !== newValue["size"]["desktop"]
						) {
							if (undefined !== newValue["size"]["desktop"]) {
								var unit =
									undefined !== newValue?.["unit"] &&
									undefined !==
										newValue?.["unit"]?.["desktop"]
										? newValue["unit"]["desktop"]
										: "px";
								formattedValue =
									("" !== newValue["size"]["desktop"][0]
										? newValue["size"]["desktop"][0]
										: "0") +
									unit +
									" " +
									("" !== newValue["size"]["desktop"][1]
										? newValue["size"]["desktop"][1]
										: "0") +
									unit +
									" " +
									("" !== newValue["size"]["desktop"][2]
										? newValue["size"]["desktop"][2]
										: "0") +
									unit +
									" " +
									("" !== newValue["size"]["desktop"][3]
										? newValue["size"]["desktop"][3]
										: "0") +
									unit;
								// Define properties.
								if (undefined == cssArray[rule["media"]])
									cssArray[rule["media"]] = {};
								if (
									undefined ==
									cssArray[rule["media"]][rule["selector"]]
								)
									cssArray[rule["media"]][rule["selector"]] =
										{};
								cssArray[rule["media"]][rule["selector"]][
									rule["property"]
								] = formattedValue;
							}
							if (undefined !== newValue["size"]["tablet"]) {
								var unit =
									undefined !== newValue?.["unit"]?.["tablet"]
										? newValue["unit"]["tablet"]
										: "";
								formattedValue =
									("" !== newValue["size"]["tablet"][0]
										? newValue["size"]["tablet"][0]
										: "0") +
									unit +
									" " +
									("" !== newValue["size"]["tablet"][1]
										? newValue["size"]["tablet"][1]
										: "0") +
									unit +
									" " +
									("" !== newValue["size"]["tablet"][2]
										? newValue["size"]["tablet"][2]
										: "0") +
									unit +
									" " +
									("" !== newValue["size"]["tablet"][3]
										? newValue["size"]["tablet"][3]
										: "0") +
									unit;
								// Define properties.
								if (undefined == cssArray[media_tablet])
									cssArray[media_tablet] = {};
								if (
									undefined ==
									cssArray[media_tablet][rule["selector"]]
								)
									cssArray[media_tablet][rule["selector"]] =
										{};
								cssArray[media_tablet][rule["selector"]][
									rule["property"]
								] = formattedValue;
							}
							if (undefined !== newValue["size"]["mobile"]) {
								var unit =
									undefined !== newValue?.["unit"]?.["mobile"]
										? newValue["unit"]["mobile"]
										: "";
								formattedValue = rule["pattern"].replace(
									"$",
									newValue["size"]["mobile"] + unit
								);
								formattedValue =
									("" !== newValue["size"]["mobile"][0]
										? newValue["size"]["mobile"][0]
										: "0") +
									unit +
									" " +
									("" !== newValue["size"]["mobile"][1]
										? newValue["size"]["mobile"][1]
										: "0") +
									unit +
									" " +
									("" !== newValue["size"]["mobile"][2]
										? newValue["size"]["mobile"][2]
										: "0") +
									unit +
									" " +
									("" !== newValue["size"]["mobile"][3]
										? newValue["size"]["mobile"][3]
										: "0") +
									unit;
								// Define properties.
								if (undefined == cssArray[media_mobile])
									cssArray[media_mobile] = {};
								if (
									undefined ==
									cssArray[media_mobile][rule["selector"]]
								)
									cssArray[media_mobile][rule["selector"]] =
										{};
								cssArray[media_mobile][rule["selector"]][
									rule["property"]
								] = formattedValue;
							}
						} else {
							formattedValue =
								(newValue["size"] && "" !== newValue["size"][0]
									? newValue["size"][0]
									: "0") +
								(newValue["unit"] ? newValue["unit"] : "px") +
								" " +
								(newValue["size"] && "" !== newValue["size"][1]
									? newValue["size"][1]
									: "0") +
								(newValue["unit"] ? newValue["unit"] : "px") +
								" " +
								(newValue["size"] && "" !== newValue["size"][2]
									? newValue["size"][2]
									: "0") +
								(newValue["unit"] ? newValue["unit"] : "px") +
								" " +
								(newValue["size"] && "" !== newValue["size"][3]
									? newValue["size"][3]
									: "0") +
								(newValue["unit"] ? newValue["unit"] : "px");
							formattedValue = rule["pattern"].replace(
								"$",
								formattedValue
							);
							// Define properties.
							if (undefined == cssArray[rule["media"]])
								cssArray[rule["media"]] = {};
							if (
								undefined ==
								cssArray[rule["media"]][rule["selector"]]
							)
								cssArray[rule["media"]][rule["selector"]] = {};
							cssArray[rule["media"]][rule["selector"]][
								rule["property"]
							] = formattedValue;
						}
					} else if (
						undefined !== rule["key"] &&
						undefined !== newValue[rule["key"]]
					) {
						// Fetch the property newValue using the key from setting value.
						if ("object" == typeof newValue[rule["key"]]) {
							if (
								undefined !== newValue[rule["key"]]["color"] &&
								"" !== newValue[rule["key"]]["color"]
							) {
								var color_type =
									undefined !==
										newValue[rule["key"]]["is_palette"] &&
									"" !== newValue[rule["key"]]["is_palette"]
										? "var(--global-" +
										  newValue[rule["key"]]["is_palette"] +
										  ")"
										: newValue[rule["key"]]["color"];
								formattedValue = rule["pattern"].replace(
									"$",
									color_type
								);
								// Define properties.
								if (undefined == cssArray[rule["media"]])
									cssArray[rule["media"]] = {};
								if (
									undefined ==
									cssArray[rule["media"]][rule["selector"]]
								)
									cssArray[rule["media"]][rule["selector"]] =
										{};
								cssArray[rule["media"]][rule["selector"]][
									rule["property"]
								] = formattedValue;
							}
							if (
								undefined !== newValue[rule["key"]]["desktop"]
							) {
								var unit =
									undefined !== newValue["unit"]["desktop"]
										? newValue["unit"]["desktop"]
										: "";
								formattedValue = rule["pattern"].replace(
									"$",
									newValue[rule["key"]]["desktop"] + unit
								);
								// Define properties.
								if (undefined == cssArray[rule["media"]])
									cssArray[rule["media"]] = {};
								if (
									undefined ==
									cssArray[rule["media"]][rule["selector"]]
								)
									cssArray[rule["media"]][rule["selector"]] =
										{};
								cssArray[rule["media"]][rule["selector"]][
									rule["property"]
								] = formattedValue;
							}
							if (undefined !== newValue[rule["key"]]["tablet"]) {
								var unit =
									undefined !== newValue["unit"]["tablet"]
										? newValue["unit"]["tablet"]
										: "";
								formattedValue = rule["pattern"].replace(
									"$",
									newValue[rule["key"]]["tablet"] + unit
								);
								// Define properties.
								if (undefined == cssArray[media_tablet])
									cssArray[media_tablet] = {};
								if (
									undefined ==
									cssArray[media_tablet][rule["selector"]]
								)
									cssArray[media_tablet][rule["selector"]] =
										{};
								cssArray[media_tablet][rule["selector"]][
									rule["property"]
								] = formattedValue;
							}
							if (undefined !== newValue[rule["key"]]["mobile"]) {
								var unit =
									undefined !== newValue["unit"]["mobile"]
										? newValue["unit"]["mobile"]
										: "";
								formattedValue = rule["pattern"].replace(
									"$",
									newValue[rule["key"]]["mobile"] + unit
								);
								// Define properties.
								if (undefined == cssArray[media_mobile])
									cssArray[media_mobile] = {};
								if (
									undefined ==
									cssArray[media_mobile][rule["selector"]]
								)
									cssArray[media_mobile][rule["selector"]] =
										{};
								cssArray[media_mobile][rule["selector"]][
									rule["property"]
								] = formattedValue;
							}
						} else {
							if (rule["key"] === "size") {
								formattedValue =
									newValue[rule["key"]] +
									(newValue["unit"]
										? newValue["unit"]
										: "px");
							} else if (
								typeof newValue[rule["key"]] === "string" &&
								newValue[rule["key"]].includes("palette")
							) {
								formattedValue =
									"var(--global-" +
									newValue[rule["key"]] +
									")";
							} else {
								formattedValue = newValue[rule["key"]];
							}
							formattedValue = rule["pattern"].replace(
								"$",
								formattedValue
							);
							// Define properties.
							if (undefined == cssArray[rule["media"]])
								cssArray[rule["media"]] = {};
							if (
								undefined ==
								cssArray[rule["media"]][rule["selector"]]
							)
								cssArray[rule["media"]][rule["selector"]] = {};
							cssArray[rule["media"]][rule["selector"]][
								rule["property"]
							] = formattedValue;
						}
					}
				} else {
					// Define new value based on the specified pattern.
					formattedValue = rule["pattern"].replace("$", newValue);
					// Define properties.
					if (undefined == cssArray[rule["media"]])
						cssArray[rule["media"]] = {};
					if (undefined == cssArray[rule["media"]][rule["selector"]])
						cssArray[rule["media"]][rule["selector"]] = {};
					cssArray[rule["media"]][rule["selector"]][
						rule["property"]
					] = formattedValue;
				}
			});
			// Loop into the sorted array to build CSS string.
			_.each(cssArray, function (selectors, media) {
				if ("global" !== media) css += media + "{";
				_.each(selectors, function (properties, selector) {
					css += selector + "{";
					_.each(properties, function (value, property) {
						css += property + ":" + value + ";";
					});
					css += "}";
				});
				if ("global" !== media) css += "}";
			});
			// Add CSS string to <style> tag.
			$style.html(css);
		},
		live_class: function (key, rules, newValue) {
			_.each(rules, function (rule) {
				var formattedValue;
				if (undefined == rule["selector"]) {
					return;
				}
				rule["pattern"] = rule["pattern"] || "$";
				if ("object" == typeof newValue) {
					if (
						undefined !== rule["key"] &&
						undefined !== newValue[rule["key"]]
					) {
						// Fetch the property newValue using the key from setting value.
						if ("object" == typeof newValue[rule["key"]]) {
							if (
								undefined !==
									newValue[rule["key"]]["desktop"] &&
								"" !== newValue[rule["key"]]["desktop"]
							) {
								if (undefined !== rule["pattern"]["desktop"]) {
									var regex = new RegExp(
										rule["pattern"]["desktop"].replace(
											"$",
											"[\\w\\-]+"
										),
										"i"
									);
									var device_pattern =
										rule["pattern"]["desktop"];
								} else {
									var regex = new RegExp(
										rule["pattern"].replace(
											"$",
											"[\\w\\-]+"
										),
										"i"
									);
									var device_pattern = rule["pattern"];
								}
								if (undefined !== rule["selector"]["desktop"]) {
									var items = document.querySelectorAll(
										rule["selector"]["desktop"]
									);
								} else {
									var items = document.querySelectorAll(
										rule["selector"]
									);
								}
								formattedValue = device_pattern.replace(
									"$",
									newValue[rule["key"]]["desktop"]
								);
								items.forEach(function (item) {
									if (item.className.match(regex)) {
										item.className = item.className.replace(
											regex,
											formattedValue
										);
									} else {
										item.className += " " + formattedValue;
									}
								});
							}
							if (
								undefined !== newValue[rule["key"]]["tablet"] &&
								"" !== newValue[rule["key"]]["tablet"]
							) {
								if (undefined !== rule["pattern"]["tablet"]) {
									var regex = new RegExp(
										rule["pattern"]["tablet"].replace(
											"$",
											"[\\w\\-]+"
										),
										"i"
									);
									var device_pattern =
										rule["pattern"]["tablet"];
								} else {
									var regex = new RegExp(
										rule["pattern"].replace(
											"$",
											"[\\w\\-]+"
										),
										"i"
									);
									var device_pattern = rule["pattern"];
								}
								if (undefined !== rule["selector"]["tablet"]) {
									var items = document.querySelectorAll(
										rule["selector"]["tablet"]
									);
								} else {
									var items = document.querySelectorAll(
										rule["selector"]
									);
								}
								formattedValue = device_pattern.replace(
									"$",
									newValue[rule["key"]]["tablet"]
								);
								items.forEach(function (item) {
									if (item.className.match(regex)) {
										item.className = item.className.replace(
											regex,
											formattedValue
										);
									} else {
										item.className += " " + formattedValue;
									}
								});
							}
							if (
								undefined !== newValue[rule["key"]]["mobile"] &&
								"" !== newValue[rule["key"]]["mobile"]
							) {
								if (undefined !== rule["pattern"]["mobile"]) {
									var regex = new RegExp(
										rule["pattern"]["mobile"].replace(
											"$",
											"[\\w\\-]+"
										),
										"i"
									);
									var device_pattern =
										rule["pattern"]["mobile"];
								} else {
									var regex = new RegExp(
										rule["pattern"].replace(
											"$",
											"[\\w\\-]+"
										),
										"i"
									);
									var device_pattern = rule["pattern"];
								}
								if (undefined !== rule["selector"]["mobile"]) {
									var items = document.querySelectorAll(
										rule["selector"]["mobile"]
									);
								} else {
									var items = document.querySelectorAll(
										rule["selector"]
									);
								}
								formattedValue = device_pattern.replace(
									"$",
									newValue[rule["key"]]["mobile"]
								);
								items.forEach(function (item) {
									if (item.className.match(regex)) {
										item.className = item.className.replace(
											regex,
											formattedValue
										);
									} else {
										item.className += " " + formattedValue;
									}
								});
							}
						} else {
							var regex = new RegExp(
									rule["pattern"].replace("$", "[\\w\\-]+"),
									"i"
								),
								items = document.querySelectorAll(
									rule["selector"]
								),
								formattedValue = rule["pattern"].replace(
									"$",
									newValue[rule["key"]]
								);
							items.forEach(function (item) {
								if (item.className.match(regex)) {
									item.className = item.className.replace(
										regex,
										formattedValue
									);
								} else {
									item.className += " " + formattedValue;
								}
							});
						}
					} else {
						if (
							undefined !== newValue["desktop"] &&
							"" !== newValue["desktop"]
						) {
							if (undefined !== rule["pattern"]["desktop"]) {
								var regex = new RegExp(
									rule["pattern"]["desktop"].replace(
										"$",
										"[\\w\\-]+"
									),
									"i"
								);
								var device_pattern = rule["pattern"]["desktop"];
							} else {
								var regex = new RegExp(
									rule["pattern"].replace("$", "[\\w\\-]+"),
									"i"
								);
								var device_pattern = rule["pattern"];
							}
							if (undefined !== rule["selector"]["desktop"]) {
								var items = document.querySelectorAll(
									rule["selector"]["desktop"]
								);
							} else {
								var items = document.querySelectorAll(
									rule["selector"]
								);
							}
							formattedValue = device_pattern.replace(
								"$",
								newValue["desktop"]
							);
							items.forEach(function (item) {
								if (item.className.match(regex)) {
									item.className = item.className.replace(
										regex,
										formattedValue
									);
								} else {
									item.className += " " + formattedValue;
								}
							});
						}
						if (
							undefined !== newValue["tablet"] &&
							"" !== newValue["tablet"]
						) {
							if (undefined !== rule["pattern"]["tablet"]) {
								var regex = new RegExp(
									rule["pattern"]["tablet"].replace(
										"$",
										"[\\w\\-]+"
									),
									"i"
								);
								var device_pattern = rule["pattern"]["tablet"];
							} else {
								var regex = new RegExp(
									rule["pattern"].replace("$", "[\\w\\-]+"),
									"i"
								);
								var device_pattern = rule["pattern"];
							}
							if (undefined !== rule["selector"]["tablet"]) {
								var items = document.querySelectorAll(
									rule["selector"]["tablet"]
								);
							} else {
								var items = document.querySelectorAll(
									rule["selector"]
								);
							}
							formattedValue = device_pattern.replace(
								"$",
								newValue["tablet"]
							);
							items.forEach(function (item) {
								if (item.className.match(regex)) {
									item.className = item.className.replace(
										regex,
										formattedValue
									);
								} else {
									item.className += " " + formattedValue;
								}
							});
						}
						if (
							undefined !== newValue["mobile"] &&
							"" !== newValue["mobile"]
						) {
							if (undefined !== rule["pattern"]["mobile"]) {
								var regex = new RegExp(
									rule["pattern"]["mobile"].replace(
										"$",
										"[\\w\\-]+"
									),
									"i"
								);
								var device_pattern = rule["pattern"]["mobile"];
							} else {
								var regex = new RegExp(
									rule["pattern"].replace("$", "[\\w\\-]+"),
									"i"
								);
								var device_pattern = rule["pattern"];
							}
							if (undefined !== rule["selector"]["mobile"]) {
								var items = document.querySelectorAll(
									rule["selector"]["mobile"]
								);
							} else {
								var items = document.querySelectorAll(
									rule["selector"]
								);
							}
							formattedValue = device_pattern.replace(
								"$",
								newValue["mobile"]
							);
							items.forEach(function (item) {
								if (item.className.match(regex)) {
									item.className = item.className.replace(
										regex,
										formattedValue
									);
								} else {
									item.className += " " + formattedValue;
								}
							});
						}
					}
				} else {
					var regex = new RegExp(
							rule["pattern"].replace("$", "[\\w\\-]+"),
							"i"
						),
						items = document.querySelectorAll(rule["selector"]),
						formattedValue = rule["pattern"].replace("$", newValue);
					items.forEach(function (item) {
						if (item.className.match(regex)) {
							item.className = item.className.replace(
								regex,
								formattedValue
							);
						} else {
							item.className += " " + formattedValue;
						}
					});
				}
			});
		},
		live_palette: function (key, rules, newValue) {
			var palette = JSON.parse(newValue);
			var active =
				palette && palette["active"] ? palette["active"] : "palette";
			if (palette && palette[active]) {
				_.each(palette[active], function (color) {
					if (color.slug == "palette10" && color.color == "#FfFfFf") {
						document.documentElement.style.setProperty(
							"--global-" + color.slug,
							"oklch(from var(--global-palette1) calc(l + 0.10 * (1 - l)) calc(c * 1.00) calc(h + 180) / 100%)"
						);
					} else if (color.slug && color.color) {
						document.documentElement.style.setProperty(
							"--global-" + color.slug,
							color.color
						);
					}
				});
			}
		},
		live_global: function (key, rules, newValue) {
			_.each(rules, function (rule) {
				var formattedValue;
				if (
					undefined == rule["property"] ||
					undefined == rule["selector"]
				) {
					return;
				}
				rule["media"] = rule["media"] || "global";
				rule["pattern"] = rule["pattern"] || "$";
				if ("object" == typeof newValue) {
					if (
						undefined !== rule["key"] &&
						undefined !== newValue[rule["key"]]
					) {
						// Fetch the property newValue using the key from setting value.
						if (
							typeof newValue[rule["key"]] === "string" &&
							newValue[rule["key"]].includes("palette") &&
							!newValue[rule["key"]].includes("gradient")
						) {
							formattedValue =
								"var(--global-" + newValue[rule["key"]] + ")";
						} else {
							formattedValue = newValue[rule["key"]];
						}
						formattedValue = rule["pattern"].replace(
							"$",
							formattedValue
						);
						// Define properties.
						document.documentElement.style.setProperty(
							rule["selector"],
							formattedValue
						);
					}
				}
			});
		},
		live_html: function (key, rules, newValue) {
			_.each(rules, function (rule) {
				var value = newValue;

if (undefined == rule["selector"]) return;
				rule["pattern"] = rule["pattern"] || "$";

var elements = document.querySelectorAll(rule["selector"]),
					formattedValue = rule["pattern"].replace("$", value);

// Change innerHTML on all targeted elements.
				elements.forEach(function (element) {
					if (undefined !== rule["property"]) {
						element.setAttribute(rule["property"], formattedValue);
					} else {
						element.innerHTML = formattedValue;
					}
				});
			});
		},
	};
	if (
		kadenceCustomizerPreviewData &&
		kadenceCustomizerPreviewData.liveControl
	) {
		_.each(
			kadenceCustomizerPreviewData.liveControl,
			function (liveControl, key) {
				var eachLiveControl = {};
				_.each(liveControl, function (rule) {
					var type = rule["type"];

if (undefined == eachLiveControl[type])
						eachLiveControl[type] = [];

eachLiveControl[type].push(rule);
				});
				wp.customize(key, function (value) {
					value.bind(function (newValue) {
						_.each(eachLiveControl, function (rule, type) {
							var functionName = "live_".concat(type);
							kadenceCustomizer[functionName](
								key,
								rule,
								newValue
							);
						});
					});
				});
			}
		);
	}
	$(document).on("customize-preview-menu-refreshed", function (e, params) {
		if (params.wpNavMenuArgs.show_toggles) {
			window.kadence.initMobileToggleSub();
		}
	});
})(jQuery);

📁 Sid Gifari File Manager