(() => {
  const ANIMATION_LENGTH = 100;
  function handleClick(e) {
    const answer = e.currentTarget.parentNode.querySelector(
      ".uui-faq02_answer-2"
    );
    const isHidden = answer.clientHeight === 0;

    answer.style = isHidden
      ? `max-height: ${answer.scrollHeight}px; overflow: hidden;`
      : "max-height: 0; overflow: hidden;";

    if (isHidden) {
      setTimeout(() => {
        answer.style = `max-height: fit-content;`;
      }, ANIMATION_LENGTH);
    }

    const chevron = e.currentTarget.querySelector(".accordion-chevron");
    chevron.style = isHidden
      ? "transform: rotate(360deg); transition: transform 100ms ease-in-out;"
      : "transform: rotate(270deg); transition: transform 100ms ease-in-out;";
  }

  const getAccordion = (title, content) => {
    return `
      <div class="uui-faq02_accordion-2">
        <div class="uui-faq02_question-2">
          <img src="https://cdn.prod.website-files.com/593ed35b7e7f144e5e0ec373/67d052b57d394605606b8cc5_chevron-down.svg" class="accordion-chevron" style="margin-right:8px;transition:transform 100ms ease-in-out;vertical-align:middle;">
          <h4 class="docs-accordion__title" style="display:inline-block;vertical-align:middle;">${title}</h3>
        </div>
        <div style="width: 100%; height: 0px" class="uui-faq02_answer-2">
          <div class="uui-max-width-large-7">
            <div class="c-rich-text-small w-richtext">${content}</div>
          </div>
        </div>
      </div>
  `;
  };
  function addStyles() {
    const styles = document.createElement("style");
    styles.innerHTML = `
      .uui-faq02_accordion-2 {
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 8px;
        margin-top: 5px;
        margin-bottom: 10px;
      }
      .uui-faq02_accordion-2 .uui-faq02_question-2 {
        padding: 4px 16px;
        background-color: initial;
	      cursor: pointer;
        display: flex;
        align-items: center;
      }
      .uui-faq02_accordion-2 .uui-faq02_answer-2 {
        max-height: 0px;
        transition: ${ANIMATION_LENGTH}ms ease-in-out;
        padding-left: 20px;
        padding-right: 20px;
	overflow: hidden;
      }
      .uui-faq02_accordion-2 .accordion-icon_vertical-line {
        transition: ${ANIMATION_LENGTH}ms ease-in-out;
      }
      .uui-faq02_accordion-2 .w-richtext {
        padding-bottom: 20px;
      }
      .uui-faq02_accordion-2 .step-number {
        background-color: #dfdfdf;
      }
      .docs-accordion__title {
        color: #444d66;
        font-size: 1rem;
        margin: 4px 0;
      }
      .accordion-chevron {
        width: 24px;
        height: 24px;
        margin-right: 8px;
	transform: rotate(270deg);
      }
    `;
    document.head.append(styles);
  }

  const richTexts = document.getElementsByClassName("w-richtext");

  function replaceCode(input, matches) {
    return input.innerHTML.replace(
      matches[0], // raw accordion content
      getAccordion(matches[1], matches[2]) // parsed accordion
    );
  }

  const regex =
    /{%\s?docs-accordion\s?title="([^\"]+)"%}((.|\n)*?)\{%\s?docs-accordion-end\s?%}/gm;
  for (const richTextElem of richTexts) {
    const matches = [...richTextElem.innerHTML.matchAll(regex)];
    for (const accordion of matches) {
      richTextElem.innerHTML = replaceCode(richTextElem, accordion);
    }
  }
  const accordionsList = document.querySelectorAll(".uui-faq02_question-2");
  for (let index = 0; index < accordionsList.length; index++) {
    const element = accordionsList[index];
    element.addEventListener("click", handleClick);
  }
  addStyles();
})();