const tabsparentcontainer = document.queryselector(".tabs_parent_container");
const tabsmarker = tabsparentcontainer.queryselector(".tab_marker");
const visibletab = tabsparentcontainer.queryselector(
   ".tab input:checked + label"
);
// set markers initial width
tabsmarker.style.width = `${visibletab.offsetwidth}px`;

// listen user clicks on tabs
tabsparentcontainer.addeventlistener("change", (e) => {
   let input = e.target;
   let selectedtab = input.closest(".tab");
   let selectedtab_x = selectedtab.getboundingclientrect().x;
   let headercontainer_x = tabsparentcontainer
      .queryselector(".tab_header")
      .getboundingclientrect().x;
   let difference = selectedtab_x - headercontainer_x;

   // set markers new width and position
   tabsmarker.style.left = `${difference}px`;
   tabsmarker.style.width = `${selectedtab.getboundingclientrect().width}px`;

   // toggle visible content
   let existingvisiblecontent = tabsparentcontainer.queryselector(
      ".tab_content.visible"
   );
   existingvisiblecontent.classlist.remove("visible");
   let associatedtabcontent = tabsparentcontainer.queryselector(
      `.tab_content[data-associated-tab="${input.id}"]`
   );
   associatedtabcontent.classlist.add("visible");

   // change background color for added effect
   document.body.style.backgroundcolor = `var(--background-${input.id.replace(
      "tab_",
      ""
   )})`;
});