(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.evoSocialIconsJS = {
    attach(context, settings) {
      let iconSettingsChanged = false;

      const mainBlock = document.querySelectorAll(
        ".evo-social-icons-block-content"
      );

      let defaultOrder = [
        "Facebook",
        "Instagram",
        "X",
        "YouTube",
        "Behance",
        "Flickr",
        "Threads",
        "Reddit",
        "Snapchat",
        "Tumblr",
        "LinkedIn",
        "Medium",
        "Mail",
        "Parler",
        "Truth Social",
        "GETTR",
        "TikTok",
        "Custom 1",
        "Custom 2"
      ];

      if (
        document.body.contains(
          document.querySelector('div[class*="evosocialicons"]')
        )
      ) {


        const dOrder1 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["-10"];
        const dOrder2 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["-9"];
        const dOrder3 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["-8"];
        const dOrder4 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["-7"];
        const dOrder5 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["-6"];
        const dOrder6 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["-5"];
        const dOrder7 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["-4"];
        const dOrder8 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["-3"];
        const dOrder9 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["-2"];
        const dOrder10 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["-1"];
        const dOrder11 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["0"];
        const dOrder12 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["1"];
        const dOrder13 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["2"];
        const dOrder14 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["3"];
        const dOrder15 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["4"];
        const dOrder16 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["5"];
        const dOrder17 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["6"];
        const dOrder18 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["7"];
        const dOrder19 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["8"];
        const dOrder20 = drupalSettings.evo_social_icons.EvoSocialIconsJS.order["9"];

        const order1 = dOrder1 !== undefined ? dOrder1 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["0"];
        const order1_social = Object.keys(order1 ? order1 : defaultOrder[19])[0];

        const order2 = dOrder2 !== undefined ? dOrder2 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["1"];
        const order2_social = Object.keys(order2 ? order2 : defaultOrder[18])[0];

        const order3 = dOrder3 !== undefined ? dOrder3 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["2"];
        const order3_social = Object.keys(order3 ? order3 : defaultOrder[17])[0];

        const order4 = dOrder4 !== undefined ? dOrder4 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["3"];
        const order4_social = Object.keys(order4 ? order4 : defaultOrder[16])[0];

        const order5 = dOrder5 !== undefined ? dOrder5 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["4"];
        const order5_social = Object.keys(order5 ? order5 : defaultOrder[15])[0];

        const order6 = dOrder6 !== undefined ? dOrder6 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["5"];
        const order6_social = Object.keys(order6 ? order6 : defaultOrder[14])[0];

        const order7 = dOrder7 !== undefined ? dOrder7 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["6"];
        const order7_social = Object.keys(order7 ? order7 : defaultOrder[13])[0];

        const order8 = dOrder8 !== undefined ? dOrder8 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["7"];
        const order8_social = Object.keys(order8 ? order8 : defaultOrder[12])[0];

        const order9 = dOrder9 !== undefined ? dOrder9 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["8"];
        const order9_social = Object.keys(order9 ? order9 : defaultOrder[11])[0];

        const order10 = dOrder10 !== undefined ? dOrder10 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["9"];
        const order10_social = Object.keys(order10 ? order10 : defaultOrder[10])[0];

        const order11 = dOrder11 !== undefined ? dOrder11 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["10"];
        const order11_social = Object.keys(order11 ? order11 : defaultOrder[9])[0];

        const order12 = dOrder12 !== undefined ? dOrder12 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["11"];
        const order12_social = Object.keys(order12 ? order12 : defaultOrder[8])[0];

        const order13 = dOrder13 !== undefined ? dOrder13 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["12"];
        const order13_social = Object.keys(order13 ? order13 : defaultOrder[7])[0];

        const order14 = dOrder14 !== undefined ? dOrder14 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["13"];
        const order14_social = Object.keys(order14 ? order14 : defaultOrder[6])[0];

        const order15 = dOrder15 !== undefined ? dOrder15 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["14"];
        const order15_social = Object.keys(order15 ? order15 : defaultOrder[5])[0];

        const order16 = dOrder16 !== undefined ? dOrder16 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["15"];
        const order16_social = Object.keys(order16 ? order16 : defaultOrder[4])[0];

        const order17 = dOrder17 !== undefined ? dOrder17 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["16"];
        const order17_social = Object.keys(order17 ? order17 : defaultOrder[3])[0];

        const order18 = dOrder18 !== undefined ? dOrder18 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["17"];
        const order18_social = Object.keys(order18 ? order18 : defaultOrder[2])[0];

        const order19 = dOrder19 !== undefined ? dOrder19 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["18"];
        const order19_social = Object.keys(order19 ? order19 : defaultOrder[1])[0];

        const order20 = dOrder20 !== undefined ? dOrder20 : drupalSettings.evo_social_icons.EvoSocialIconsJS.order["19"];
        const order20_social = Object.keys(order20 ? order20 : defaultOrder[0])[0];

        function removeSocialClassNames(element) {
          var classNames = ["facebook", "instagram", "x", "youtube", "behance", "flickr", "threads", "snapchat", "tumblr", "linkedin", "medium", "mail", "reddit", "parler", "truthsocial", "gettr", "rumble", "tiktok", "custom1", "custom2"];
        
          classNames.forEach(function(className) {
              element.classList.remove(className);
          });
        
          iconSettingsChanged = true;
      }
      
        function wrapWithAnchorTag(element) {
          let wrap = document.createElement("a");
          element.parentNode.replaceChild(wrap, element);
          wrap.appendChild(element);
          iconSettingsChanged = true;
        }

        function getCheckboxStatus(order, order_social) {
          const order_type = order[order_social];
          const order_checkbox = order_type.checkbox;
          const order_url = order_type.url;
          const order_weight = order_type.weight;
          
          // convert the weight into a normal order (0-12)
          let normalOrder = parseInt(order_weight, 10) + 10;
        
          let icons;

          if (order4 == drupalSettings.evo_social_icons.EvoSocialIconsJS.order["3"]) {
            icons = document.querySelectorAll(`.tc-icon.icon-${normalOrder}`);
          } else {
            icons = document.querySelectorAll(`.tc-icon.icon-${normalOrder + 1}`);
          }
          
          icons.forEach((icon) => {
            removeSocialClassNames(icon);
            // remove whitespaces before converting to lower case
            let socialClass = order_social.replace(/\s/g, '').toLowerCase(); 
            icon.classList.add(socialClass);
            order_checkbox == 1 ? wrapWithAnchorTag(icon) : '';
            let style = getComputedStyle(icon);
            order_checkbox == 1 && style.backgroundImage != "none"
              ? (icon.style.display = "flex !important")
              : (icon.style.display = "none");
            icon.parentElement.href = order_url;
            icon.parentElement.setAttribute(
              "aria-label",
              `Visit our ${order_social}`
            );
            icon.setAttribute("alt", `Visit our ${order_social}`);
            icon.setAttribute("title", `${order_social} Icon`);
          });
        }
        

        function determineOrderOfIcons(order, order_social) {
          const supportedSocialNetworks = ["Instagram", "Facebook", "X", "YouTube", "Behance", "Flickr", "Threads", "Reddit", "Snapchat", "Tumblr", "LinkedIn", "Medium", "Mail", "Parler", "Truth Social", "GETTR", "Rumble", "TikTok", "Custom 1", "Custom 2"];
      
          if (supportedSocialNetworks.includes(order_social)) {
              getCheckboxStatus(order, order_social);
          } else {
              console.log(`Social: ${order_social} | Order: ${order_social} Please set order of social icons in Evo Social icons settings.`);
          }
      }
      
        const facebookEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.facebook_checkbox;
        const instagramEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.instagram_checkbox;
        const xEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.x_checkbox;
        const youtubeEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.youtube_checkbox;
        const behanceEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.behance_checkbox;
        const flickrEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.flickr_checkbox;
        const threadsEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.threads_checkbox;
        const redditEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.reddit_checkbox;
        const snapchatEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.snapchat_checkbox;
        const tumblrEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.tumblr_checkbox;
        const linkedinEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.linkedin_checkbox;
        const mediumEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.medium_checkbox;
        const mailEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.mail_checkbox;
        const parlerEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.parler_checkbox;
        const truthSocialEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.truthsocial_checkbox;
        const gettrEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.gettr_checkbox;
        const rumbleEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.rumble_checkbox;
        const tiktokEnabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.tiktok_checkbox;
        const custom1Enabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.custom1_checkbox;
        const custom2Enabled = drupalSettings.evo_social_icons.EvoSocialIconsJS.custom2_checkbox;

        let checkboxStatuses = [
          facebookEnabled,
          instagramEnabled,
          xEnabled,
          youtubeEnabled,
          behanceEnabled,
          flickrEnabled,
          threadsEnabled,
          redditEnabled,
          snapchatEnabled,
          tumblrEnabled,
          linkedinEnabled,
          mediumEnabled,
          mailEnabled,
          parlerEnabled,
          truthSocialEnabled,
          gettrEnabled,
          rumbleEnabled,
          tiktokEnabled,
          custom1Enabled,
          custom2Enabled
      ];
      
      if (checkboxStatuses.some(status => status !== null)) {
          iconSettingsChanged = true;
      }
      
      const pos1icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_1 ? drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_1 : "facebook";
        const pos2icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_2;
        const pos3icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_3;
        const pos4icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_4;
        const pos5icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_5;
        const pos6icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_6;
        const pos7icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_7;
        const pos8icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_8;
        const pos9icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_9;
        const pos10icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_10;
        const pos11icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_11;
        const pos12icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_12;
        const pos13icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_13;
        const pos14icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_14;
        const pos15icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_15;
        const pos16icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_16;
        const pos17icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_17;
        const pos18icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_18;
        const pos19icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_19;
        const pos20icon = drupalSettings.evo_social_icons.EvoSocialIconsJS.icon_pos_20;

        const facebookURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.facebook_url;
        const instagramURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.instagram_url;
        const xURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.x_url;
        const youtubeURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.youtube_url;
        const behanceURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.behance_url;
        const flickrURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.flickr_url;
        const threadsURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.threads_url;
        const redditURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.reddit_url;
        const snapchatURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.snapchat_url;
        const tumblrURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.tumblr_url;
        const linkedinURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.linkedin_url;
        const mediumURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.medium_url;
        const mailURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.mail_url;
        const parlerURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.parler_url;
        const truthSocialURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.truthsocial_url;
        const gettrURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.gettr_url;
        const rumbleURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.rumble_url;
        const tiktokURL = drupalSettings.evo_social_icons.EvoSocialIconsJS.tiktok_url;
        const custom1URL = drupalSettings.evo_social_icons.EvoSocialIconsJS.custom1_url;
        const custom2URL = drupalSettings.evo_social_icons.EvoSocialIconsJS.custom2_url;

        mainBlock.forEach(function (block) {
          block.insertAdjacentHTML(
            "afterbegin",
            `
                    <div class="evo-social-icons-here">
                        <div class="tc-icon icon-1"></div>
                        <div class="tc-icon icon-2"></div>
                        <div class="tc-icon icon-3"></div>
                        <div class="tc-icon icon-4"></div>
                        <div class="tc-icon icon-5"></div>
                        <div class="tc-icon icon-6"></div>
                        <div class="tc-icon icon-7"></div>
                        <div class="tc-icon icon-8"></div>
                        <div class="tc-icon icon-9"></div>
                        <div class="tc-icon icon-10"></div>
                        <div class="tc-icon icon-11"></div>
                        <div class="tc-icon icon-12"></div>
                        <div class="tc-icon icon-13"></div>
                        <div class="tc-icon icon-14"></div>
                        <div class="tc-icon icon-15"></div>
                        <div class="tc-icon icon-16"></div>
                        <div class="tc-icon icon-17"></div>
                        <div class="tc-icon icon-18"></div>
                        <div class="tc-icon icon-19"></div>
                        <div class="tc-icon icon-20"></div>
                    </div>
                 `
          );
        });

        let mainSocialBlock = document.querySelectorAll(
          'div[class*="evosocialicons"]'
        );
        if (mainSocialBlock) {
          mainSocialBlock.forEach((sm) => {
            sm.classList.add("evo-social-icons-block-main");
          });
        }
        
        const tcIcons = document.querySelectorAll(".tc-icon");
        const tcIconsHere = document.querySelectorAll(".evo-social-icons-here");

        const tcIcon1 = document.querySelectorAll(".icon-1");
        const tcIcon2 = document.querySelectorAll(".icon-2");
        const tcIcon3 = document.querySelectorAll(".icon-3");
        const tcIcon4 = document.querySelectorAll(".icon-4");
        const tcIcon5 = document.querySelectorAll(".icon-5");
        const tcIcon6 = document.querySelectorAll(".icon-6");
        const tcIcon7 = document.querySelectorAll(".icon-7");
        const tcIcon8 = document.querySelectorAll(".icon-8");
        const tcIcon9 = document.querySelectorAll(".icon-9");
        const tcIcon10 = document.querySelectorAll(".icon-10");
        const tcIcon11 = document.querySelectorAll(".icon-11");
        const tcIcon12 = document.querySelectorAll(".icon-12");
        const tcIcon13 = document.querySelectorAll(".icon-13");
        const tcIcon14 = document.querySelectorAll(".icon-14");
        const tcIcon15 = document.querySelectorAll(".icon-15");
        const tcIcon16 = document.querySelectorAll(".icon-16");
        const tcIcon17 = document.querySelectorAll(".icon-17");
        const tcIcon18 = document.querySelectorAll(".icon-18");
        const tcIcon19 = document.querySelectorAll(".icon-19");
        const tcIcon20 = document.querySelectorAll(".icon-20");

        const settingsCurrnetIconFamily = drupalSettings.evo_social_icons
          .EvoSocialIconsJS.social_icon_family
          ? drupalSettings.evo_social_icons.EvoSocialIconsJS.social_icon_family
          : "tc_standard_fill";

        let settingsIconFillColor;
        if (
          drupalSettings.evo_social_icons.EvoSocialIconsJS.social_icon_color !=
          null
        ) {
          settingsIconFillColor =
            drupalSettings.evo_social_icons.EvoSocialIconsJS.social_icon_color;
        } else {
          settingsIconFillColor = "black";
        }

        let settingsIconSize;
        if (
          drupalSettings.evo_social_icons.EvoSocialIconsJS.social_icon_size !=
          null
        ) {
          settingsIconSize =
            drupalSettings.evo_social_icons.EvoSocialIconsJS.social_icon_size;
        } else {
          settingsIconSize = "30px";
        }

        let settingsIconSpacing;
        if (
          drupalSettings.evo_social_icons.EvoSocialIconsJS
            .social_icon_spacing != null
        ) {
          settingsIconSpacing =
            drupalSettings.evo_social_icons.EvoSocialIconsJS
              .social_icon_spacing;
        } else {
          settingsIconSpacing = "10px";
        }

        let settingsIconAlignment;
        if (
          drupalSettings.evo_social_icons.EvoSocialIconsJS
            .social_icon_alignment != null
        ) {
          settingsIconAlignment =
            drupalSettings.evo_social_icons.EvoSocialIconsJS
              .social_icon_alignment;
        } else {
          settingsIconAlignment = "flex-start";
        }

        tcIcons.forEach(function (icon) {
          icon.style.height = settingsIconSize ? settingsIconSize : "30px";
          icon.style.width = settingsIconSize ? settingsIconSize : "30px";
          icon.style.marginRight = settingsIconSpacing
            ? settingsIconSpacing
            : "10px";
        });

        tcIconsHere.forEach(function (here) {
          here.style.justifyContent = settingsIconAlignment
            ? settingsIconAlignment
            : "flex-start";
        });

        if (settingsCurrnetIconFamily != null) {
          switch (settingsCurrnetIconFamily) {
            case "design_bolts_long_shadow_square":
              createDesignBoltsLongShadowSquareIcons(tcIcons);
              break;
            case "freepik_color_3d":
              createFreePikColor3DIcons(tcIcons);
              break;
            case "freepik_color_bg_circle":
              createFreePikColorBGIcons(tcIcons);
              break;
            case "freepik_color_bg_square":
              createFreePikColorBGSquareIcons(tcIcons);
              break;
            case "freepik_full_color":
              createFreePikFullColorIcons(tcIcons);
              break;
            case "iconfinder_emboss":
              createIconfinderEmbossIcons(tcIcons);
              break;
            case "iconfinder_line_drawn":
              createIconfinderLineDrawnWithFILLEDColor(
                tcIcons,
                settingsIconFillColor
              );
              break;
            case "iconfinder_round_outline":
              createIconfinderRoudOutlineWithFILLEDColor(
                tcIcons,
                settingsIconFillColor
              );
              break;
            case "iconfinder_toon_circle":
              createIconfinderToonCircleIcons(tcIcons);
              break;
            case "pixel_perfect_flat":
              createPixelPerfectFlatIcons(tcIcons);
              break;
            case "pixel_perfect_flat_fill":
              createPixelPerfectFlatIconsWithFILLEDColor(
                tcIcons,
                settingsIconFillColor
              );
              break;
            case "tc_square_outline_fill":
              createTCSquareOutlineWithFILLEDColor(
                tcIcons,
                settingsIconFillColor
              );
              break;
            case "tc_square_solid_fill":
              createTCSquareSolidWithFILLEDColor(
                tcIcons,
                settingsIconFillColor
              );
              break;
            case "tc_rounded_square_outline_fill":
              createTCRoundedSquareOutlineWithFILLEDColor(
                tcIcons,
                settingsIconFillColor
              );
              break;
            case "tc_rounded_square_solid_fill":
              createTCRoundedSquareSolidWithFILLEDColor(
                tcIcons,
                settingsIconFillColor
              );
              break;
            case "tc_square_full_color_bg":
              createTCSquareFullColorBGIcons(tcIcons, settingsIconFillColor);
              break;
            case "tc_circle_full_color_bg":
              createTCCircleFullColorBGIcons(tcIcons, settingsIconFillColor);
              break;
            case "tc_rounded_square_full_color_bg":
              createTCRoundedSquareFullColorBGIcons(
                tcIcons,
                settingsIconFillColor
              );
              break;
            case "tc_square_gloss":
              createTCSquareGlossIcons(tcIcons, settingsIconFillColor);
              break;
            case "tc_circle_outline_fill":
              createTCCircleOutlineWithFILLEDColor(
                tcIcons,
                settingsIconFillColor
              );
              break;
            case "tc_circle_solid_fill":
              createTCCircleSolidWithFILLEDColor(
                tcIcons,
                settingsIconFillColor
              );
              break;
            case "tc_standard_fill":
              createTCStandardWithFILLEDColor(tcIcons, settingsIconFillColor);
              break;
            default:
              createPixelPerfectFlatIconsWithFILLEDColor(
                tcIcons,
                settingsIconFillColor
              );
              break;
          }
        } else {
          createPixelPerfectFlatIconsWithFILLEDColor(
            tcIcons,
            settingsIconFillColor
          );
        }

        placeIconInPosition(pos1icon, tcIcon1);
        placeIconInPosition(pos2icon, tcIcon2);
        placeIconInPosition(pos3icon, tcIcon3);
        placeIconInPosition(pos4icon, tcIcon4);
        placeIconInPosition(pos5icon, tcIcon5);
        placeIconInPosition(pos6icon, tcIcon6);
        placeIconInPosition(pos7icon, tcIcon7);
        placeIconInPosition(pos8icon, tcIcon8);
        placeIconInPosition(pos9icon, tcIcon9);
        placeIconInPosition(pos10icon, tcIcon10);
        placeIconInPosition(pos11icon, tcIcon11);
        placeIconInPosition(pos12icon, tcIcon12);
        placeIconInPosition(pos13icon, tcIcon13);
        placeIconInPosition(pos14icon, tcIcon14);
        placeIconInPosition(pos15icon, tcIcon15);
        placeIconInPosition(pos16icon, tcIcon16);
        placeIconInPosition(pos17icon, tcIcon17);
        placeIconInPosition(pos18icon, tcIcon18);
        placeIconInPosition(pos19icon, tcIcon19);
        placeIconInPosition(pos20icon, tcIcon20);

        function placeIconInPosition(posNumicon, tcIconNum) {
          switch (posNumicon) {
            case "facebook":
              if (facebookEnabled) {
                createFacebookIcon(tcIconNum);
              }
              break;
            case "x":
              if (xEnabled) {
                createXIcon(tcIconNum);
              }
              break;
            case "tumblr":
              if (tumblrEnabled) {
                createTumblrIcon(tcIconNum);
              }
              break;
            case "instagram":
              if (instagramEnabled) {
                createInstagramIcon(tcIconNum);
              }
              break;
            case "youtube":
              if (youtubeEnabled) {
                createYouTubeIcon(tcIconNum);
              }
              break;
            case "reddit":
              if (redditEnabled) {
                createRedditIcon(tcIconNum);
              }
              break;
            case "flickr":
              if (flickrEnabled) {
                createFlickrIcon(tcIconNum);
              }
              break;
            case "behance":
              if (behanceEnabled) {
                createBehanceIcon(tcIconNum);
              }
              break;
            case "threads":
              if (threadsEnabled) {
                createThreadsIcon(tcIconNum);
              }
              break;
            case "linkedin":
              if (linkedinEnabled) {
                createLinkedInIcon(tcIconNum);
              }
              break;
            case "snapchat":
              if (snapchatEnabled) {
                createSnapchatIcon(tcIconNum);
              }
              break;
            case "mail":
              if (mailEnabled) {
                createMailIcon(tcIconNum);
              }
              break;
            case "medium":
              if (mediumEnabled) {
                createMediumIcon(tcIconNum);
              }
            case "parler":
              if (parlerEnabled) {
                createParlerIcon(tcIconNum);
              }
            case "truthsocial":
              if (truthSocialEnabled) {
                createTruthSocialIcon(tcIconNum);
              }
            case "gettr":
              if (gettrEnabled) {
                createGettrIcon(tcIconNum);
              }
            case "rumble":
              if (rumbleEnabled) {
                createRumbleIcon(tcIconNum);
              }
            case "tiktok":
              if (tiktokEnabled) {
                createTikTokIcon(tcIconNum);
              }
            case "custom1":
              if (custom1Enabled) {
                createCustom1Icon(tcIconNum);
              }
            case "custom2":
              if (custom2Enabled) {
                createCustom2Icon(tcIconNum);
              }
              break;
            default:
              break;
          }
        }

        // add FREEPIK Color BG Circle styles to all elements of this class
        function createFreePikColorBGIcons(el) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("freepik-color-bg-circle"));
        }

        // add FREEPIK Full Color styles to all elements of this class
        function createFreePikFullColorIcons(el) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("freepik-full-color"));
        }

        // add FREEPIK Color BG Square styles to all elements of this class
        function createFreePikColorBGSquareIcons(el) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("freepik-color-bg-square"));
        }

        // add FREEPIK Color 3D styles to all elements of this class
        function createFreePikColor3DIcons(el) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("freepik-color-3d"));
        }

        // add PIXEL PERFECT flat styles to all elements of this class
        function createPixelPerfectFlatIcons(el) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("pixel-perfect-flat"));
        }

        // add PIXEL PERFECT FILLED flat styles to all elements of this class
        function createPixelPerfectFlatIconsWithFILLEDColor(el, color) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("pixel-perfect-flat"));
          el.forEach((el) => el.classList.add("filled"));
          el.forEach((el) => (el.style.backgroundColor = color));
        }

        // add ICONFINDER round outline styles to all elements of this class
        function createIconfinderRoudOutlineWithFILLEDColor(el, color) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("iconfinder-round-outline"));
          el.forEach((el) => el.classList.add("filled"));
          el.forEach((el) => (el.style.backgroundColor = color));
        }

        // add ICONFINDER round outline styles to all elements of this class
        function createIconfinderLineDrawnWithFILLEDColor(el, color) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("iconfinder-line-drawn"));
          el.forEach((el) => el.classList.add("filled"));
          el.forEach((el) => (el.style.backgroundColor = color));
        }

        // add PIXEL PERFECT flat styles to all elements of this class
        function createDesignBoltsLongShadowSquareIcons(el) {
          removeAllFamilyClasses(el);
          el.forEach((el) =>
            el.classList.add("design-bolts-long-shadow-square")
          );
        }

        // add ICONFINDER toon circle to all elements of this class
        function createIconfinderToonCircleIcons(el) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("iconfinder-toon-circle"));
        }

        // add ICONFINDER emboss to all elements of this class
        function createIconfinderEmbossIcons(el) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("iconfinder-emboss"));
        }

        // add TC square full color bg to all elements of this class
        function createTCSquareFullColorBGIcons(el) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("tc-square-full-color-bg"));
        }

        // add TC circle full color bg to all elements of this class
        function createTCCircleFullColorBGIcons(el) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("tc-circle-full-color-bg"));
        }

        // add TC Rounded Square full color bg to all elements of this class
        function createTCRoundedSquareFullColorBGIcons(el) {
          removeAllFamilyClasses(el);
          el.forEach((el) =>
            el.classList.add("tc-rounded-square-full-color-bg")
          );
        }

        // add TC Square Gloss to all elements of this class
        function createTCSquareGlossIcons(el) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("tc-square-gloss"));
        }

        // add TC square outline fill styles to all elements of this class
        function createTCSquareOutlineWithFILLEDColor(el, color) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("tc-square-outline-fill"));
          el.forEach((el) => el.classList.add("filled"));
          el.forEach((el) => (el.style.backgroundColor = color));
        }

        // add TC square solid fill styles to all elements of this class
        function createTCSquareSolidWithFILLEDColor(el, color) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("tc-square-solid-fill"));
          el.forEach((el) => el.classList.add("filled"));
          el.forEach((el) => (el.style.backgroundColor = color));
        }

        // add TC rounded square outline fill styles to all elements of this class
        function createTCRoundedSquareOutlineWithFILLEDColor(el, color) {
          removeAllFamilyClasses(el);
          el.forEach((el) =>
            el.classList.add("tc-rounded-square-outline-fill")
          );
          el.forEach((el) => el.classList.add("filled"));
          el.forEach((el) => (el.style.backgroundColor = color));
        }

        // add TC rounded square solid fill styles to all elements of this class
        function createTCRoundedSquareSolidWithFILLEDColor(el, color) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("tc-rounded-square-solid-fill"));
          el.forEach((el) => el.classList.add("filled"));
          el.forEach((el) => (el.style.backgroundColor = color));
        }

        // add TC CIRCLE OUTLINE fill styles to all elements of this class
        function createTCCircleOutlineWithFILLEDColor(el, color) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("tc-circle-outline-fill"));
          el.forEach((el) => el.classList.add("filled"));
          el.forEach((el) => (el.style.backgroundColor = color));
        }

        // add TC CIRCLE SOLID fill styles to all elements of this class
        function createTCCircleSolidWithFILLEDColor(el, color) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("tc-circle-solid-fill"));
          el.forEach((el) => el.classList.add("filled"));
          el.forEach((el) => (el.style.backgroundColor = color));
        }

        // add TC STANDARD fill styles to all elements of this class
        function createTCStandardWithFILLEDColor(el, color) {
          removeAllFamilyClasses(el);
          el.forEach((el) => el.classList.add("tc-standard-fill"));
          el.forEach((el) => el.classList.add("filled"));
          el.forEach((el) => (el.style.backgroundColor = color));
        }

        // CREATE SOCIAL ICONS

        // add facebook icon to this particular item index
        function createFacebookIcon(el) {
          el.forEach((el) => el.classList.add("facebook"));
          setURL(el, facebookURL);
        }

        // add x icon to this particular item index
        function createXIcon(el) {
          el.forEach((el) => el.classList.add("x"));
          setURL(el, xURL);
        }

        // add instagram icon to this particular item index
        function createInstagramIcon(el) {
          el.forEach((el) => el.classList.add("instagram"));
          setURL(el, instagramURL);
        }

        // add flickr icon to this particular item index
        function createFlickrIcon(el) {
          el.forEach((el) => el.classList.add("flickr"));
          setURL(el, flickrURL);
        }

        // add reddit icon to this particular item index
        function createRedditIcon(el) {
          el.forEach((el) => el.classList.add("reddit"));
          setURL(el, redditURL);
        }

        // add behance icon to this particular item index
        function createBehanceIcon(el) {
          el.forEach((el) => el.classList.add("behance"));
          setURL(el, behanceURL);
        }

        // add youtube icon to this particular item index
        function createYouTubeIcon(el) {
          el.forEach((el) => el.classList.add("youtube"));
          setURL(el, youtubeURL);
        }

        // add behance icon to this particular item index
        function createThreadsIcon(el) {
          el.forEach((el) => el.classList.add("threads"));
          setURL(el, threadsURL);
        }

        // add youtube icon to this particular item index
        function createLinkedInIcon(el) {
          el.forEach((el) => el.classList.add("linkedin"));
          setURL(el, linkedinURL);
        }

        // add youtube icon to this particular item index
        function createTumblrIcon(el) {
          el.forEach((el) => el.classList.add("tumblr"));
          setURL(el, tumblrURL);
        }

        // add snapchat icon to this particular item index
        function createSnapchatIcon(el) {
          el.forEach((el) => el.classList.add("snapchat"));
          setURL(el, snapchatURL);
        }

        // add mail icon to this particular item index
        function createMailIcon(el) {
          el.forEach((el) => el.classList.add("mail"));
          setURL(el, mailURL);
        }

        // add medium icon to this particular item index
        function createMediumIcon(el) {
          el.forEach((el) => el.classList.add("medium"));
          setURL(el, mediumURL);
        }

        // add parler icon to this particular item index
        function createParlerIcon(el) {
          el.forEach((el) => el.classList.add("parler"));
          setURL(el, parlerURL);
        }

        // add truth social icon to this particular item index
        function createTruthSocialIcon(el) {
          el.forEach((el) => el.classList.add("truthsocial"));
          setURL(el, truthSocialURL);
        }

        // add gettr icon to this particular item index
        function createGettrIcon(el) {
          el.forEach((el) => el.classList.add("gettr"));
          setURL(el, gettrURL);
        }

        // add rumble icon to this particular item index
        function createRumbleIcon(el) {
          el.forEach((el) => el.classList.add("rumble"));
          setURL(el, rumbleURL);
        }

        // add tiktok icon to this particular item index
        function createTikTokIcon(el) {
          el.forEach((el) => el.classList.add("tiktok"));
          setURL(el, tiktokURL);
        }

        // add custom1 icon to this particular item index
        function createCustom1Icon(el) {
          el.forEach((el) => el.classList.add("custom1"));
          setURL(el, custom1URL);
        }

        // add custom2 icon to this particular item index
        function createCustom2Icon(el) {
          el.forEach((el) => el.classList.add("custom2"));
          setURL(el, custom2URL);
        }

        const allSocialIconsA = document.querySelectorAll(
          ".evo-social-icons-here > a > div"
        );
        allSocialIconsA.forEach(function (icon) {
          let style = icon.currentStyle || window.getComputedStyle(icon, false);
          bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
        });

        const allSocialIcons = document.querySelectorAll(
          ".evo-social-icons-here > div"
        );
        allSocialIcons.forEach(function (icon) {
          let style = icon.currentStyle || window.getComputedStyle(icon, false);
          bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
        });

        function removeAllFamilyClasses(el) {
          el.forEach((el) =>
            el.classList.remove(
              "tc-circle-solid-fill",
              "tc-circle-outline-fill",
              "tc-standard-fill",
              "tc-square-gloss",
              "tc-rounded-square-full-color-bg",
              "tc-circle-full-color-bg",
              "tc-square-full-color-bg",
              "tc-square-solid-fill",
              "tc-rounded-square-outline-fill",
              "tc-rounded-square-solid-fill",
              "tc-square-outline-fill",
              "freepik-color-bg-circle",
              "freepik-full-color",
              "freepik-color-bg-square",
              "freepik-color-3d",
              "pixel-perfect-flat",
              "iconfinder-round-outline",
              "iconfinder-line-drawn",
              "design-bolts-long-shadow-square",
              "iconfinder-toon-circle",
              "iconfinder-emboss",
              "filled"
            )
          );
        }

        function setURL(el, url) {
          el.forEach((el) => {
            let link = document.createElement("a");
            link.innerHTML = el.outerHTML;
            link.setAttribute("href", url);
            link.setAttribute("target", "_blank");
            el.parentNode.insertBefore(link, el);
            el.remove();
          });
        }

        const tcSocialIconsHere = document.querySelectorAll(
          ".evo-social-icons-here"
        );

        determineOrderOfIcons(order1, order1_social);
        determineOrderOfIcons(order2, order2_social);
        determineOrderOfIcons(order3, order3_social);
        determineOrderOfIcons(order4, order4_social);
        determineOrderOfIcons(order5, order5_social);
        determineOrderOfIcons(order6, order6_social);
        determineOrderOfIcons(order7, order7_social);
        determineOrderOfIcons(order8, order8_social);
        determineOrderOfIcons(order9, order9_social);
        determineOrderOfIcons(order10, order10_social);
        determineOrderOfIcons(order11, order11_social);
        determineOrderOfIcons(order12, order12_social);
        determineOrderOfIcons(order13, order13_social);
        determineOrderOfIcons(order14, order14_social);
        determineOrderOfIcons(order15, order15_social);
        determineOrderOfIcons(order16, order16_social);
        determineOrderOfIcons(order17, order17_social);
        determineOrderOfIcons(order18, order18_social);
        determineOrderOfIcons(order19, order19_social);
        determineOrderOfIcons(order20, order20_social);

        function displaySVGIconAndFillColor(icon_family_SOCIAL, iconFamilySVG) {
          icon_family_SOCIAL.forEach((icon) => {
            icon.innerHTML = '';//iconFamilySVG;
            icon.style.backgroundColor = settingsIconFillColor
              ? settingsIconFillColor
              : "transparent";
            const path = icon.querySelectorAll("path");
            const rect = icon.querySelectorAll("rect");
            const circle = icon.querySelectorAll("circle");
            const line = icon.querySelectorAll("line");
            path.forEach((path) => {
              path.style.fill = settingsIconFillColor;
            });
            path.forEach((path) => {
              path.style.stroke = settingsIconFillColor;
            });
            rect.forEach((rect) => {
              rect.style.fill = settingsIconFillColor;
            });
            rect.forEach((rect) => {
              rect.style.stroke = settingsIconFillColor;
            });
            circle.forEach((cir) => {
              cir.style.fill = settingsIconFillColor;
            });
            circle.forEach((cir) => {
              cir.style.stroke = settingsIconFillColor;
            });
            line.forEach((line) => {
              line.style.stroke = settingsIconFillColor;
            });
          });
        }

        // pixel perfect flat svgs
        const pixel_perfect_flat_BEHANCE = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.behance.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_BEHANCE,
          pixelPerfectFlat.behance
        );
        const pixel_perfect_flat_FACEBOOK = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.facebook.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_FACEBOOK,
          pixelPerfectFlat.facebook
        );
        const pixel_perfect_flat_FLICKR = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.flickr.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_FLICKR,
          pixelPerfectFlat.flickr
        );
        const pixel_perfect_flat_INSTAGRAM = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.instagram.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_INSTAGRAM,
          pixelPerfectFlat.instagram
        );
        const pixel_perfect_flat_LINKEDIN = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.linkedin.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_LINKEDIN,
          pixelPerfectFlat.linkedin
        );
        const pixel_perfect_flat_PINTEREST = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.threads.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_PINTEREST,
          pixelPerfectFlat.threads
        );
        const pixel_perfect_flat_REDDIT = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.reddit.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_REDDIT,
          pixelPerfectFlat.reddit
        );
        const pixel_perfect_flat_SNAPCHAT = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.snapchat.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_SNAPCHAT,
          pixelPerfectFlat.snapchat
        );
        const pixel_perfect_flat_TUMBLR = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.tumblr.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_TUMBLR,
          pixelPerfectFlat.tumblr
        );
        const pixel_perfect_flat_TWITTER = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.x.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_TWITTER,
          pixelPerfectFlat.x
        );
        const pixel_perfect_flat_YOUTUBE = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.youtube.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_YOUTUBE,
          pixelPerfectFlat.youtube
        );
        const pixel_perfect_flat_PARLER = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.parler.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_PARLER,
          pixelPerfectFlat.parler
        );
        
        const pixel_perfect_flat_TRUTHSOCIAL = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.truthsocial.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_TRUTHSOCIAL,
          pixelPerfectFlat.truthSocial
        );
        
        const pixel_perfect_flat_GETTR = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.gettr.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_GETTR,
          pixelPerfectFlat.gettr
        );
        
        const pixel_perfect_flat_RUMBLE = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.rumble.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_RUMBLE,
          pixelPerfectFlat.rumble
        );
        
        const pixel_perfect_flat_TIKTOK = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.tiktok.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_TIKTOK,
          pixelPerfectFlat.tiktok
        );
        
        const pixel_perfect_flat_CUSTOM_1 = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.custom1.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_CUSTOM_1,
          pixelPerfectFlat.custom1
        );
        
        const pixel_perfect_flat_CUSTOM_2 = document.querySelectorAll(
          ".tc-icon.pixel-perfect-flat.custom2.filled"
        );
        displaySVGIconAndFillColor(
          pixel_perfect_flat_CUSTOM_2,
          pixelPerfectFlat.custom2
        );
        

        // iconfinder round outline svgs
        const iconfinder_round_outline_FACEBOOK = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.facebook.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_FACEBOOK,
          iconFinderRoundOutline.facebook
        );
        const iconfinder_round_outline_FLICKR = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.flickr.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_FLICKR,
          iconFinderRoundOutline.flickr
        );
        const iconfinder_round_outline_INSTAGRAM = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.instagram.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_INSTAGRAM,
          iconFinderRoundOutline.instagram
        );
        const iconfinder_round_outline_LINKEDIN = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.linkedin.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_LINKEDIN,
          iconFinderRoundOutline.linkedin
        );
        const iconfinder_round_outline_MAIL = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.mail.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_MAIL,
          iconFinderRoundOutline.mail
        );
        const iconfinder_round_outline_PINTEREST = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.threads.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_PINTEREST,
          iconFinderRoundOutline.threads
        );
        const iconfinder_round_outline_REDDIT = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.reddit.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_REDDIT,
          iconFinderRoundOutline.reddit
        );
        const iconfinder_round_outline_TUMBLR = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.tumblr.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_TUMBLR,
          iconFinderRoundOutline.tumblr
        );
        const iconfinder_round_outline_TWITTER = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.x.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_TWITTER,
          iconFinderRoundOutline.x
        );
        const iconfinder_round_outline_YOUTUBE = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.youtube.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_YOUTUBE,
          iconFinderRoundOutline.youtube
        );
        const iconfinder_round_outline_PARLER = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.parler.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_PARLER,
          iconFinderRoundOutline.parler
        );
        const iconfinder_round_outline_TRUTHSOCIAL = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.truthsocial.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_TRUTHSOCIAL,
          iconFinderRoundOutline.truthsocial
        );
        const iconfinder_round_outline_GETTR = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.gettr.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_GETTR,
          iconFinderRoundOutline.gettr
        );
        const iconfinder_round_outline_RUMBLE = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.rumble.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_RUMBLE,
          iconFinderRoundOutline.rumble
        );
        const iconfinder_round_outline_TIKTOK = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.tiktok.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_TIKTOK,
          iconFinderRoundOutline.tiktok
        );
        const iconfinder_round_outline_BEHANCE = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.behance.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_BEHANCE,
          iconFinderRoundOutline.behance
        );
        const iconfinder_round_outline_SNAPCHAT = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.snapchat.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_SNAPCHAT,
          iconFinderRoundOutline.snapchat
        );
        const iconfinder_round_outline_MEDIUM = document.querySelectorAll(
          ".tc-icon.iconfinder-round-outline.medium.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_round_outline_MEDIUM,
          iconFinderRoundOutline.medium
        );

        // iconfinder line drawn svgs
        const iconfinder_line_drawn_BEHANCE = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.behance.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_BEHANCE,
          iconFinderLineDrawn.behance
        );
        const iconfinder_line_drawn_FACEBOOK = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.facebook.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_FACEBOOK,
          iconFinderLineDrawn.facebook
        );
        const iconfinder_line_drawn_INSTAGRAM = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.instagram.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_INSTAGRAM,
          iconFinderLineDrawn.instagram
        );
        const iconfinder_line_drawn_LINKEDIN = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.linkedin.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_LINKEDIN,
          iconFinderLineDrawn.linkedin
        );
        const iconfinder_line_drawn_MAIL = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.mail.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_MAIL,
          iconFinderLineDrawn.mail
        );
        const iconfinder_line_drawn_PINTEREST = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.threads.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_PINTEREST,
          iconFinderLineDrawn.threads
        );
        const iconfinder_line_drawn_SNAPCHAT = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.snapchat.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_SNAPCHAT,
          iconFinderLineDrawn.snapchat
        );
        const iconfinder_line_drawn_TUMBLR = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.tumblr.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_TUMBLR,
          iconFinderLineDrawn.tumblr
        );
        const iconfinder_line_drawn_TWITTER = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.x.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_TWITTER,
          iconFinderLineDrawn.x
        );
        const iconfinder_line_drawn_YOUTUBE = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.youtube.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_YOUTUBE,
          iconFinderLineDrawn.youtube
        );
        const iconfinder_line_drawn_TIKTOK = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.tiktok.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_TIKTOK,
          iconFinderLineDrawn.tiktok
        );
        const iconfinder_line_drawn_TRUTHSOCIAL = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.truthsocial.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_TRUTHSOCIAL,
          iconFinderLineDrawn.truthsocial
        );
        const iconfinder_line_drawn_FLICKR = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.flickr.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_FLICKR,
          iconFinderLineDrawn.flickr
        );
        const iconfinder_line_drawn_REDDIT = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.reddit.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_REDDIT,
          iconFinderLineDrawn.reddit
        );
        const iconfinder_line_drawn_MEDIUM = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.medium.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_MEDIUM,
          iconFinderLineDrawn.medium
        );
        const iconfinder_line_drawn_PARLER = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.parler.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_PARLER,
          iconFinderLineDrawn.parler
        );
        const iconfinder_line_drawn_RUMBLE = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.rumble.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_RUMBLE,
          iconFinderLineDrawn.rumble
        );
        const iconfinder_line_drawn_GETTR = document.querySelectorAll(
          ".tc-icon.iconfinder-line-drawn.gettr.filled"
        );
        displaySVGIconAndFillColor(
          iconfinder_line_drawn_GETTR,
          iconFinderLineDrawn.gettr
        );


        // tc square outline fill svgs
        const tc_square_outline_fill_BEHANCE = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.behance.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_BEHANCE,
          tcSquareOutlineFill.behance
        );
        const tc_square_outline_fill_FACEBOOK = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.facebook.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_FACEBOOK,
          tcSquareOutlineFill.facebook
        );
        const tc_square_outline_fill_FLICKR = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.flickr.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_FLICKR,
          tcSquareOutlineFill.flickr
        );
        const tc_square_outline_fill_INSTAGRAM = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.instagram.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_INSTAGRAM,
          tcSquareOutlineFill.instagram
        );
        const tc_square_outline_fill_LINKEDIN = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.linkedin.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_LINKEDIN,
          tcSquareOutlineFill.linkedin
        );
        const tc_square_outline_fill_MAIL = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.mail.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_MAIL,
          tcSquareOutlineFill.mail
        );
        const tc_square_outline_fill_MEDIUM = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.medium.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_MEDIUM,
          tcSquareOutlineFill.medium
        );
        const tc_square_outline_fill_PINTEREST = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.threads.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_PINTEREST,
          tcSquareOutlineFill.threads
        );
        const tc_square_outline_fill_REDDIT = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.reddit.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_REDDIT,
          tcSquareOutlineFill.reddit
        );
        const tc_square_outline_fill_SNAPCHAT = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.snapchat.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_SNAPCHAT,
          tcSquareOutlineFill.snapchat
        );
        const tc_square_outline_fill_TUMBLR = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.tumblr.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_TUMBLR,
          tcSquareOutlineFill.tumblr
        );
        const tc_square_outline_fill_TWITTER = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.x.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_TWITTER,
          tcSquareOutlineFill.x
        );
        const tc_square_outline_fill_YOUTUBE = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.youtube.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_YOUTUBE,
          tcSquareOutlineFill.youtube
        );
        const tc_square_outline_fill_TIKTOK = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.tiktok.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_TIKTOK,
          tcSquareOutlineFill.tiktok
        );
        const tc_square_outline_fill_TRUTHSOCIAL = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.truthsocial.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_TRUTHSOCIAL,
          tcSquareOutlineFill.truthsocial
        );
        const tc_square_outline_fill_PARLER = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.parler.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_PARLER,
          tcSquareOutlineFill.parler
        );
        const tc_square_outline_fill_RUMBLE = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.rumble.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_RUMBLE,
          tcSquareOutlineFill.rumble
        );
        const tc_square_outline_fill_GETTR = document.querySelectorAll(
          ".tc-icon.tc-square-outline-fill.gettr.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_outline_fill_GETTR,
          tcSquareOutlineFill.gettr
        );

        // tc square solid fill svgs
        const tc_square_solid_fill_BEHANCE = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.behance.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_BEHANCE,
          tcSquareSolidFill.behance
        );
        const tc_square_solid_fill_FACEBOOK = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.facebook.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_FACEBOOK,
          tcSquareSolidFill.facebook
        );
        const tc_square_solid_fill_FLICKR = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.flickr.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_FLICKR,
          tcSquareSolidFill.flickr
        );
        const tc_square_solid_fill_INSTAGRAM = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.instagram.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_INSTAGRAM,
          tcSquareSolidFill.instagram
        );
        const tc_square_solid_fill_LINKEDIN = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.linkedin.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_LINKEDIN,
          tcSquareSolidFill.linkedin
        );
        const tc_square_solid_fill_MAIL = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.mail.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_MAIL,
          tcSquareSolidFill.mail
        );
        const tc_square_solid_fill_MEDIUM = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.medium.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_MEDIUM,
          tcSquareSolidFill.medium
        );
        const tc_square_solid_fill_PINTEREST = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.threads.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_PINTEREST,
          tcSquareSolidFill.threads
        );
        const tc_square_solid_fill_REDDIT = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.reddit.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_REDDIT,
          tcSquareSolidFill.reddit
        );
        const tc_square_solid_fill_SNAPCHAT = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.snapchat.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_SNAPCHAT,
          tcSquareSolidFill.snapchat
        );
        const tc_square_solid_fill_TUMBLR = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.tumblr.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_TUMBLR,
          tcSquareSolidFill.tumblr
        );
        const tc_square_solid_fill_TWITTER = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.x.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_TWITTER,
          tcSquareSolidFill.x
        );
        const tc_square_solid_fill_YOUTUBE = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.youtube.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_YOUTUBE,
          tcSquareSolidFill.youtube
        );
        const tc_square_solid_fill_TIKTOK = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.tiktok.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_TIKTOK,
          tcSquareSolidFill.tiktok
        );
        const tc_square_solid_fill_TRUTHSOCIAL = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.truthsocial.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_TRUTHSOCIAL,
          tcSquareSolidFill.truthsocial
        );
        const tc_square_solid_fill_PARLER = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.parler.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_PARLER,
          tcSquareSolidFill.parler
        );
        const tc_square_solid_fill_RUMBLE = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.rumble.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_RUMBLE,
          tcSquareSolidFill.rumble
        );
        const tc_square_solid_fill_GETTR = document.querySelectorAll(
          ".tc-icon.tc-square-solid-fill.gettr.filled"
        );
        displaySVGIconAndFillColor(
          tc_square_solid_fill_GETTR,
          tcSquareSolidFill.gettr
        );

        // tc rounded square outline fill svgs
        const tc_rounded_square_outline_fill_FACEBOOK = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.facebook.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_FACEBOOK,
          tcRoundedSquareOutlineFill.facebook
        );
        const tc_rounded_square_outline_fill_BEHANCE = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.behance.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_BEHANCE,
          tcRoundedSquareOutlineFill.behance
        );
        const tc_rounded_square_outline_fill_FLICKR = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.flickr.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_FLICKR,
          tcRoundedSquareOutlineFill.flickr
        );
        const tc_rounded_square_outline_fill_INSTAGRAM = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.instagram.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_INSTAGRAM,
          tcRoundedSquareOutlineFill.instagram
        );
        const tc_rounded_square_outline_fill_LINKEDIN = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.linkedin.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_LINKEDIN,
          tcRoundedSquareOutlineFill.linkedin
        );
        const tc_rounded_square_outline_fill_MAIL = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.mail.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_MAIL,
          tcRoundedSquareOutlineFill.mail
        );
        const tc_rounded_square_outline_fill_MEDIUM = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.medium.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_MEDIUM,
          tcRoundedSquareOutlineFill.medium
        );
        const tc_rounded_square_outline_fill_PINTEREST = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.threads.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_PINTEREST,
          tcRoundedSquareOutlineFill.threads
        );
        const tc_rounded_square_outline_fill_REDDIT = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.reddit.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_REDDIT,
          tcRoundedSquareOutlineFill.reddit
        );
        const tc_rounded_square_outline_fill_SNAPCHAT = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.snapchat.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_SNAPCHAT,
          tcRoundedSquareOutlineFill.snapchat
        );
        const tc_rounded_square_outline_fill_TUMBLR = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.tumblr.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_TUMBLR,
          tcRoundedSquareOutlineFill.tumblr
        );
        const tc_rounded_square_outline_fill_TWITTER = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.x.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_TWITTER,
          tcRoundedSquareOutlineFill.x
        );
        const tc_rounded_square_outline_fill_YOUTUBE = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.youtube.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_YOUTUBE,
          tcRoundedSquareOutlineFill.youtube
        );
        const tc_rounded_square_outline_fill_TIKTOK = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.tiktok.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_TIKTOK,
          tcRoundedSquareOutlineFill.tiktok
        );
        const tc_rounded_square_outline_fill_TRUTHSOCIAL = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.truthsocial.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_TRUTHSOCIAL,
          tcRoundedSquareOutlineFill.truthsocial
        );
        const tc_rounded_square_outline_fill_PARLER = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.parler.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_PARLER,
          tcRoundedSquareOutlineFill.parler
        );
        const tc_rounded_square_outline_fill_RUMBLE = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.rumble.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_RUMBLE,
          tcRoundedSquareOutlineFill.rumble
        );
        const tc_rounded_square_outline_fill_GETTR = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-outline-fill.gettr.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_outline_fill_GETTR,
          tcRoundedSquareOutlineFill.gettr
        );

        // tc rounded square solid fill svgs
        const tc_rounded_square_solid_fill_FACEBOOK = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.facebook.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_FACEBOOK,
          tcRoundedSquareSolidFill.facebook
        );
        const tc_rounded_square_solid_fill_BEHANCE = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.behance.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_BEHANCE,
          tcRoundedSquareSolidFill.behance
        );
        const tc_rounded_square_solid_fill_FLICKR = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.flickr.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_FLICKR,
          tcRoundedSquareSolidFill.flickr
        );
        const tc_rounded_square_solid_fill_INSTAGRAM = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.instagram.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_INSTAGRAM,
          tcRoundedSquareSolidFill.instagram
        );
        const tc_rounded_square_solid_fill_LINKEDIN = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.linkedin.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_LINKEDIN,
          tcRoundedSquareSolidFill.linkedin
        );
        const tc_rounded_square_solid_fill_MAIL = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.mail.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_MAIL,
          tcRoundedSquareSolidFill.mail
        );
        const tc_rounded_square_solid_fill_MEDIUM = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.medium.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_MEDIUM,
          tcRoundedSquareSolidFill.medium
        );
        const tc_rounded_square_solid_fill_PINTEREST = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.threads.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_PINTEREST,
          tcRoundedSquareSolidFill.threads
        );
        const tc_rounded_square_solid_fill_REDDIT = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.reddit.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_REDDIT,
          tcRoundedSquareSolidFill.reddit
        );
        const tc_rounded_square_solid_fill_SNAPCHAT = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.snapchat.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_SNAPCHAT,
          tcRoundedSquareSolidFill.snapchat
        );
        const tc_rounded_square_solid_fill_TUMBLR = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.tumblr.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_TUMBLR,
          tcRoundedSquareSolidFill.tumblr
        );
        const tc_rounded_square_solid_fill_TWITTER = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.x.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_TWITTER,
          tcRoundedSquareSolidFill.x
        );
        const tc_rounded_square_solid_fill_YOUTUBE = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.youtube.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_YOUTUBE,
          tcRoundedSquareSolidFill.youtube
        );
        const tc_rounded_square_solid_fill_TIKTOK = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.tiktok.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_TIKTOK,
          tcRoundedSquareSolidFill.tiktok
        );
        const tc_rounded_square_solid_fill_TRUTHSOCIAL = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.truthsocial.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_TRUTHSOCIAL,
          tcRoundedSquareSolidFill.truthsocial
        );
        const tc_rounded_square_solid_fill_PARLER = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.parler.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_PARLER,
          tcRoundedSquareSolidFill.parler
        );
        const tc_rounded_square_solid_fill_RUMBLE = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.rumble.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_RUMBLE,
          tcRoundedSquareSolidFill.rumble
        );
        const tc_rounded_square_solid_fill_GETTR = document.querySelectorAll(
          ".tc-icon.tc-rounded-square-solid-fill.gettr.filled"
        );
        displaySVGIconAndFillColor(
          tc_rounded_square_solid_fill_GETTR,
          tcRoundedSquareSolidFill.gettr
        );

        // tc circle outline fill svgs
        const tc_circle_outline_fill_FACEBOOK = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.facebook.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_FACEBOOK,
          tcCircleOutlineFill.facebook
        );
        const tc_circle_outline_fill_BEHANCE = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.behance.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_BEHANCE,
          tcCircleOutlineFill.behance
        );
        const tc_circle_outline_fill_FLICKR = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.flickr.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_FLICKR,
          tcCircleOutlineFill.flickr
        );
        const tc_circle_outline_fill_INSTAGRAM = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.instagram.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_INSTAGRAM,
          tcCircleOutlineFill.instagram
        );
        const tc_circle_outline_fill_LINKEDIN = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.linkedin.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_LINKEDIN,
          tcCircleOutlineFill.linkedin
        );
        const tc_circle_outline_fill_MAIL = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.mail.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_MAIL,
          tcCircleOutlineFill.mail
        );
        const tc_circle_outline_fill_MEDIUM = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.medium.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_MEDIUM,
          tcCircleOutlineFill.medium
        );
        const tc_circle_outline_fill_PINTEREST = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.threads.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_PINTEREST,
          tcCircleOutlineFill.threads
        );
        const tc_circle_outline_fill_REDDIT = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.reddit.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_REDDIT,
          tcCircleOutlineFill.reddit
        );
        const tc_circle_outline_fill_SNAPCHAT = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.snapchat.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_SNAPCHAT,
          tcCircleOutlineFill.snapchat
        );
        const tc_circle_outline_fill_TUMBLR = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.tumblr.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_TUMBLR,
          tcCircleOutlineFill.tumblr
        );
        const tc_circle_outline_fill_TWITTER = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.x.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_TWITTER,
          tcCircleOutlineFill.x
        );
        const tc_circle_outline_fill_YOUTUBE = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.youtube.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_YOUTUBE,
          tcCircleOutlineFill.youtube
        );
        const tc_circle_outline_fill_TIKTOK = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.tiktok.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_TIKTOK,
          tcCircleOutlineFill.tiktok
        );
        const tc_circle_outline_fill_TRUTHSOCIAL = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.truthsocial.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_TRUTHSOCIAL,
          tcCircleOutlineFill.truthsocial
        );
        const tc_circle_outline_fill_PARLER = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.parler.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_PARLER,
          tcCircleOutlineFill.parler
        );
        const tc_circle_outline_fill_RUMBLE = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.rumble.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_RUMBLE,
          tcCircleOutlineFill.rumble
        );
        const tc_circle_outline_fill_GETTR = document.querySelectorAll(
          ".tc-icon.tc-circle-outline-fill.gettr.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_outline_fill_GETTR,
          tcCircleOutlineFill.gettr
        );


        // tc circle solid fill svgs
        const tc_circle_solid_fill_FACEBOOK = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.facebook.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_FACEBOOK,
          tcCircleSolidFill.facebook
        );
        const tc_circle_solid_fill_BEHANCE = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.behance.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_BEHANCE,
          tcCircleSolidFill.behance
        );
        const tc_circle_solid_fill_FLICKR = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.flickr.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_FLICKR,
          tcCircleSolidFill.flickr
        );
        const tc_circle_solid_fill_INSTAGRAM = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.instagram.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_INSTAGRAM,
          tcCircleSolidFill.instagram
        );
        const tc_circle_solid_fill_LINKEDIN = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.linkedin.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_LINKEDIN,
          tcCircleSolidFill.linkedin
        );
        const tc_circle_solid_fill_MAIL = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.mail.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_MAIL,
          tcCircleSolidFill.mail
        );
        const tc_circle_solid_fill_MEDIUM = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.medium.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_MEDIUM,
          tcCircleSolidFill.medium
        );
        const tc_circle_solid_fill_PINTEREST = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.threads.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_PINTEREST,
          tcCircleSolidFill.threads
        );
        const tc_circle_solid_fill_REDDIT = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.reddit.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_REDDIT,
          tcCircleSolidFill.reddit
        );
        const tc_circle_solid_fill_SNAPCHAT = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.snapchat.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_SNAPCHAT,
          tcCircleSolidFill.snapchat
        );
        const tc_circle_solid_fill_TUMBLR = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.tumblr.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_TUMBLR,
          tcCircleSolidFill.tumblr
        );
        const tc_circle_solid_fill_TWITTER = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.x.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_TWITTER,
          tcCircleSolidFill.x
        );
        const tc_circle_solid_fill_YOUTUBE = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.youtube.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_YOUTUBE,
          tcCircleSolidFill.youtube
        );
        const tc_circle_solid_fill_TIKTOK = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.tiktok.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_TIKTOK,
          tcCircleSolidFill.tiktok
        );
        const tc_circle_solid_fill_TRUTHSOCIAL = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.truthsocial.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_TRUTHSOCIAL,
          tcCircleSolidFill.truthsocial
        );
        const tc_circle_solid_fill_PARLER = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.parler.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_PARLER,
          tcCircleSolidFill.parler
        );
        const tc_circle_solid_fill_RUMBLE = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.rumble.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_RUMBLE,
          tcCircleSolidFill.rumble
        );
        const tc_circle_solid_fill_GETTR = document.querySelectorAll(
          ".tc-icon.tc-circle-solid-fill.gettr.filled"
        );
        displaySVGIconAndFillColor(
          tc_circle_solid_fill_GETTR,
          tcCircleSolidFill.gettr
        );

        // tc standard fill svgs
        const tc_standard_fill_FACEBOOK = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.facebook.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_FACEBOOK,
          tcStandardFill.facebook
        );
        const tc_standard_fill_BEHANCE = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.behance.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_BEHANCE,
          tcStandardFill.behance
        );
        const tc_standard_fill_FLICKR = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.flickr.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_FLICKR,
          tcStandardFill.flickr
        );
        const tc_standard_fill_INSTAGRAM = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.instagram.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_INSTAGRAM,
          tcStandardFill.instagram
        );
        const tc_standard_fill_LINKEDIN = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.linkedin.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_LINKEDIN,
          tcStandardFill.linkedin
        );
        const tc_standard_fill_MAIL = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.mail.filled"
        );
        displaySVGIconAndFillColor(tc_standard_fill_MAIL, tcStandardFill.mail);
        const tc_standard_fill_MEDIUM = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.medium.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_MEDIUM,
          tcStandardFill.medium
        );
        const tc_standard_fill_PINTEREST = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.threads.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_PINTEREST,
          tcStandardFill.threads
        );
        const tc_standard_fill_REDDIT = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.reddit.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_REDDIT,
          tcStandardFill.reddit
        );
        const tc_standard_fill_SNAPCHAT = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.snapchat.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_SNAPCHAT,
          tcStandardFill.snapchat
        );
        const tc_standard_fill_TUMBLR = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.tumblr.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_TUMBLR,
          tcStandardFill.tumblr
        );
        const tc_standard_fill_TWITTER = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.x.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_TWITTER,
          tcStandardFill.x
        );
        const tc_standard_fill_YOUTUBE = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.youtube.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_YOUTUBE,
          tcStandardFill.youtube
        );
        const tc_standard_fill_TIKTOK = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.tiktok.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_TIKTOK,
          tcStandardFill.tiktok
        );
        const tc_standard_fill_TRUTHSOCIAL = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.truthsocial.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_TRUTHSOCIAL,
          tcStandardFill.truthsocial
        );
        const tc_standard_fill_PARLER = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.parler.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_PARLER,
          tcStandardFill.parler
        );
        const tc_standard_fill_RUMBLE = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.rumble.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_RUMBLE,
          tcStandardFill.rumble
        );
        const tc_standard_fill_GETTR = document.querySelectorAll(
          ".tc-icon.tc-standard-fill.gettr.filled"
        );
        displaySVGIconAndFillColor(
          tc_standard_fill_GETTR,
          tcStandardFill.gettr
        );

        const allTCIcons = document.querySelectorAll(".tc-icon");
        allTCIcons.forEach((icon) => {
          //icon.setAttribute("role", "presentation");
        });

        if (iconSettingsChanged == false) {
          tcSocialIconsHere.forEach((tcsih) => {
            tcsih.insertAdjacentHTML(
              "beforebegin",
              `
                <p>Enable more icons in Evo Social Icons Settings.</p>
            `
            );
          });
        }
      }

      const tcSocialMediaSettingsWrapper = document.getElementById(
        "evo-social-icons-settings"
      );

      if (tcSocialMediaSettingsWrapper) {
        const socialIconFamilyDropdown = document.getElementById(
          "edit-social-icon-family"
        );

        socialIconFamilyDropdown.insertAdjacentHTML(
          "afterend",
          `
        <button class="button button--primary" id="preview-styles-btn">Preview Styles</button>
    `
        );

        const previewStylesBtn = document.getElementById("preview-styles-btn");
        const editGroup3 = document.getElementById("edit-group3");

        showIconPreviewsOnClick();
        const iconPopupWrapper = document.getElementById(
          "icon-preview-popup-wrapper"
        );
        const previewStylesCloseBtn = document.querySelector(
          "#icon-preview-popup-wrapper #close-icon"
        );
        iconPopupWrapper.style.display = "none";

        previewStylesBtn.addEventListener("click", function (btn) {
          btn.preventDefault();
          if (iconPopupWrapper.style.display == "none") {
            iconPopupWrapper.style.display = "flex";
            document.body.classList.add("stop-scrolling");
          } else {
            iconPopupWrapper.style.display = "none";
            document.body.classList.remove("stop-scrolling");
          }
        });

        previewStylesCloseBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/></svg>`;

        previewStylesCloseBtn.addEventListener("click", function () {
          iconPopupWrapper.style.display = "none";
          document.body.classList.remove("stop-scrolling");
        });

        function showIconPreviewsOnClick() {
          editGroup3.insertAdjacentHTML(
            "afterend",
            `
            <div id="icon-preview-popup-wrapper">
            <div id="icon-prev-task-bar"><div id="close-icon"></div><p>Evo Social Icons Icon Style/Family Previews</p></div>
            <div id="icon-prev-content-wrapper">
                    <h3>Full Color Icons</h3>
                    <div id="full-clr-wrapper">
                        <div id="long-shadow-square-prev">
                            <h4>Long Shadow Square</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="freepik-3d-prev">
                            <h4>3D by FreePik</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="color-background-round-prev">
                            <h4>Color Background Round</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="color-background-square-prev">
                            <h4>Color Background Square</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="full-color-standard-prev">
                            <h4>Full Color Standard</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="emboss-by-iconfinder-prev">
                            <h4>Emboss by Iconfinder</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="pixel-perfect-flat-prev">
                            <h4>Pixel Perfect Flat</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="toon-circles-prev">
                            <h4>Toon Circles</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="tc-square-color-bg-prev">
                            <h4>TC Square Color BG</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="tc-circle-color-bg-prev">
                            <h4>TC Circle Color BG</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="tc-rounded-square-color-bg-prev">
                            <h4>TC Rounded Square Color BG</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="tc-square-gloss-prev">
                            <h4>TC Square Gloss</h4>
                            <div class="prev-img"></div>
                        </div>
                    </div>
                    <h3>Color Fill Icons</h3>
                    <div id="color-fill-wrapper">
                        <div id="line-drawn-prev">
                            <h4>Line Drawn</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="round-outline-prev">
                            <h4>Round Outline</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="pixel-perfect-flat-fill-prev">
                            <h4>Pixel Perfect Flat Fill</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="tc-square-outline-fill-prev">
                            <h4>TC Square Outline Fill</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="tc-square-solid-fill-prev">
                            <h4>TC Square Solid Fill</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="tc-rounded-square-outline-fill-prev">
                            <h4>TC Rounded Square Outline Fill</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="tc-rounded-square-solid-fill-prev">
                            <h4>TC Rounded Square Solid Fill</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="tc-circle-outline-fill-prev">
                            <h4>TC Circle Outline Fill</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="tc-circle-solid-fill-prev">
                            <h4>TC Circle Solid Fill</h4>
                            <div class="prev-img"></div>
                        </div>
                        <div id="tc-standard-fill-prev">
                            <h4>TC Standard Fill</h4>
                            <div class="prev-img"></div>
                        </div>
                    </div>
                </div>
            </div>
        `
          );
        }
      }

      let svgIcon = document.querySelectorAll(".tc-icon > svg");
      svgIcon.forEach((icon) => {
        icon.classList.add("evo-svg-filled");
        icon.setAttribute(
          "fill",
          drupalSettings.evo_social_icons.EvoSocialIconsJS.social_icon_color
            ? drupalSettings.evo_social_icons.EvoSocialIconsJS.social_icon_color
            : "#006FC7"
        );
      });

      // EVO SOCIAL ICONS SHARE

      let socialMediaShareBlock = document.querySelectorAll(
        ".evo-social-icons-share-block-content"
      );
      if (socialMediaShareBlock) {
        socialMediaShareBlock.forEach((shareblock) => {
          shareblock.insertAdjacentHTML(
            "afterbegin",
            `
        <div class="tc-share-icons-wrapper">
            <div class="tc-fb-share tc-share-btn"><a target="_blank" href="" class="tc-fb-share-link"><i class="fa-brands fa-facebook"></i><span>Share</span></a></div>
            <div class="tc-tw-share tc-share-btn"><a target="_blank" href="" class="tc-tw-share-link"><i class="fa-brands fa-x"></i><span>Tweet</span></a></div>
            <div class="tc-re-share tc-share-btn"><a target="_blank" href="" class="tc-re-share-link"><i class="fa-brands fa-reddit"></i><span>Post</span></a></div>
            <div class="tc-em-share tc-share-btn"><a href="" class="tc-em-share-link"><i class="fa-5x fa-solid fa-envelope"></i><span>Email</span></a></div>
        </div>
        `
          );

          let tcFBShareLink = document.querySelectorAll(".tc-fb-share-link");
          let tcTWShareLink = document.querySelectorAll(".tc-tw-share-link");
          let tcREShareLink = document.querySelectorAll(".tc-re-share-link");
          let tcEMShareLink = document.querySelectorAll(".tc-em-share-link");

          let currentPageURL = window.location.href;
          let pageTitle = document.querySelector(
            'div[class*="page-title"] h1 > span'
          );

          tcFBShareLink.forEach((fb) => {
            fb.href = `https://www.facebook.com/sharer/sharer.php?u=${currentPageURL}`;
          });

          tcTWShareLink.forEach((tw) => {
            if (pageTitle) {
              tw.href = `https://x.com/intent/tweet?url=${currentPageURL}&text=${pageTitle.innerText}`;
            } else {
              tw.href = `https://x.com/intent/tweet?url=${currentPageURL}`;
            }
          });

          tcREShareLink.forEach((re) => {
            if (pageTitle) {
              re.href = `http://www.reddit.com/submit?url=${currentPageURL}&title=${pageTitle.innerText}`;
            } else {
              re.href = `http://www.reddit.com/submit?url=${currentPageURL}`;
            }
          });

          tcEMShareLink.forEach((em) => {
            if (pageTitle) {
              em.href = `mailto:?subject=${pageTitle.innerText}&body=${currentPageURL}`;
            } else {
              em.href = `mailto:?subject=Check out ${currentPageURL}&body=Check out ${currentPageURL}`;
            }
          });
        });
      }

      // version 2.0 custom icon additions

      // access the custom1_image and custom2_image URLs

      const drupalOrder = drupalSettings.evo_social_icons.EvoSocialIconsJS.order;

      console.log(drupalOrder);

      const drupalCustom1ImageURL = findKeyInNestedObject(drupalOrder, "Custom 1");
      const drupalCustom2ImageURL = findKeyInNestedObject(drupalOrder, "Custom 2");

      const cimg1 = drupalCustom1ImageURL.custom1_image;
      const cimg2 = drupalCustom2ImageURL.custom2_image;

      const cimg1Checkbox = findKeyInNestedObject(drupalCustom1ImageURL, "checkbox");
      const cimg2Checkbox = findKeyInNestedObject(drupalCustom2ImageURL, "checkbox");

      const iconCustom1 = document.querySelectorAll('.tc-icon.custom1');
      const iconCustom2 = document.querySelectorAll('.tc-icon.custom2');

      if (iconCustom1[0]) {
        iconCustom1.forEach(p => {
          p.classList.add('custom-icon-1', 'custom-icon', 'tc-icon-custom', 'evo-social-custom')
        })
      }
      if (iconCustom2[0]) {
        iconCustom2.forEach(p => {
          p.classList.add('custom-icon-2', 'custom-icon', 'tc-icon-custom', 'evo-social-custom')
        })
      }

      const iconCustom1Icon = document.querySelectorAll('.tc-icon.custom1.custom-icon-1.custom-icon.tc-icon-custom.evo-social-custom');
      const iconCustom2Icon = document.querySelectorAll('.tc-icon.custom2.custom-icon-2.custom-icon.tc-icon-custom.evo-social-custom');

      const iconCustom1Filled = document.querySelectorAll('.tc-icon.custom1.custom-icon-1.custom-icon.tc-icon-custom.evo-social-custom.filled');
      const iconCustom2Filled = document.querySelectorAll('.tc-icon.custom2.custom-icon-2.custom-icon.tc-icon-custom.evo-social-custom.filled');

      if (cimg1Checkbox == 1) {
        if (iconCustom1Icon[0]) {
          iconCustom1Icon.forEach(ppfc1 => {
            ppfc1.style.backgroundImage =  `url("${cimg1 ? cimg1 : ''}")`;
            ppfc1.style.display = !cimg1 || cimg1.value == '' ? 'none' : 'block';
            ppfc1.setAttribute('title', 'Social Icon');
            ppfc1.setAttribute('alt', 'Custom Social Icon');
            ppfc1.parentElement.setAttribute('aria-label', 'Visit our profile');
          })
        }
        if (iconCustom1Filled[0]) {
          iconCustom1Filled.forEach(ppfc1 => {
            ppfc1.style.backgroundImage =  `url("${cimg1 ? cimg1 : ''}")`;
            ppfc1.style.backgroundColor = 'transparent';
            ppfc1.setAttribute('title', 'Social Icon');
            ppfc1.setAttribute('alt', 'Custom Social Icon');
            ppfc1.parentElement.setAttribute('aria-label', 'Visit our profile');
          })
        }
      }

      if (cimg2Checkbox == 1) {
        if (iconCustom2Icon[0]) {
          iconCustom2Icon.forEach(ppfc2 => {
            ppfc2.style.backgroundImage =  `url("${cimg2 ? cimg2 : ''}")`;
            ppfc2.style.display = !cimg2 || cimg2.value == '' ? 'none' : 'block';
            ppfc2.setAttribute('title', 'Social Icon');
            ppfc2.setAttribute('alt', 'Custom Social Icon');
            ppfc2.parentElement.setAttribute('aria-label', 'Visit our profile');
          })
        }
        if (iconCustom2Filled[0]) {
          iconCustom2Filled.forEach(ppfc2 => {
            ppfc2.style.backgroundImage =  `url("${cimg2 ? cimg2 : ''}")`;
            ppfc2.style.backgroundColor = 'transparent';
            ppfc2.setAttribute('title', 'Social Icon');
            ppfc2.setAttribute('alt', 'Custom Social Icon');
            ppfc2.parentElement.setAttribute('aria-label', 'Visit our profile');
          })
        }
      }

      const evoSocialIconsHere = document.querySelectorAll('.evo-social-icons-here');
        if (evoSocialIconsHere[0]) {
          evoSocialIconsHere.forEach(here => {
            here.removeAttribute("aria-label");
          })
        }

      // function to find key in nested object

      function findKeyInNestedObject(obj, targetKey) {
        // Check if the current object has the target key
        if (obj.hasOwnProperty(targetKey)) {
          return obj[targetKey];
        }
        
        // Iterate over the object's properties
        for (let key in obj) {
          if (typeof obj[key] === 'object' && obj[key] !== null) {
            // Recursively search for the key in nested objects
            const result = findKeyInNestedObject(obj[key], targetKey);
            if (result !== undefined) {
              return result;
            }
          }
        }
        
        // Key not found
        return undefined;
      }
    },
  };

  document.addEventListener('DOMContentLoaded', function() {
    const evoSocialIconsHereDiv = document.querySelectorAll('.evo-social-icons-here');
    if (evoSocialIconsHereDiv[0]) {
      evoSocialIconsHereDiv.forEach(item => {
        item.removeAttribute('aria-label');
      })
    }
  });

})(jQuery, Drupal, drupalSettings);