@sc-360-v2/storefront-cms-library 0.1.4 → 0.1.6

package/dist/editor-core.scss

@@ -0,0 +1,312 @@
+@use "sass:map";
+@use "sass:list";
+@import "./tools/add-button.scss";
+@import "./elements/section.scss";
+@import "./elements/grid.scss";
+@import "./elements/container.scss";
+
+$dropElementSelector: "[data-drop-element='cms-drop-element']";
+$activeElementSelector: "[data-has-clicked='true']";
+
+[data-page-id="cms__template__editor"] {
+  [data-page-id="page-wrapper"] {
+    display: var(--_d-grid);
+    padding-block-end: 50px;
+
+    &[data-child-empty="true"] {
+      align-items: center;
+      height: 100%;
+    }
+  }
+  [data-div-type="section"] {
+    position: var(--_p-relative);
+    width: 100%;
+    // max-width: calc(100% - 1px) !important;
+    display: var(--_d-flex) !important;
+    flex-direction: column;
+    justify-self: stretch;
+    align-self: stretch;
+    // overflow-x: clip;
+    --_vertical-horizontal-btn-size: 20px;
+    // padding: 4px;
+    justify-content: center;
+
+    --_sf-element-vt-pd: max(
+      0.5px,
+      0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+    );
+    --_sf-element-hr-pd: max(
+      0.5px,
+      0.0117188 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+    );
+
+    // [drop-over-element="true"] {
+    //   * {
+    //     pointer-events: none !important;
+    //   }
+    // }
+
+    &[data-child-count="0"] {
+      & > [data-div-type="cms-section-wrapper"] {
+        display: var(--_d-none) !important;
+      }
+    }
+
+    &[data-cms-element-dragging="true"],
+    &[data-nochildhover-resizer="true"],
+    &:has([data-cms-element-resizer="true"]) {
+      --_child-pointer-events-section: none;
+      pointer-events: none !important;
+    }
+
+    &[data-nochildhover-resizer="true"] {
+      // --_child-pointer-events-section: none;
+      // pointer-events: none !important;
+      // --_vertical-horizontal-btn-size: 300px;
+      --_addSpan-display: var(--_d-none);
+      // --_resizer-span-size: 100px;
+      // overflow-y: clip;
+      // overflow-clip-margin: 100px;
+
+      div {
+        &[data-div-type="cms-section-wrapper"],
+        &.styles__wrapper {
+          min-height: calc(var(--_self-resizing-minHeight, 0) * 1px) !important;
+        }
+      }
+    }
+
+    &:has(button[data-div-type="Add row"][data-has-fullyfilled="true"]:hover) {
+      // pointer-events: none;
+      button {
+        &[data-div-type="Add column"] {
+          display: var(--_d-none);
+          // pointer-events: none;
+          // opacity: 0;
+        }
+      }
+    }
+
+    // --_cms-children-zIndex: 2;
+    // --_cms-layers-zIndex: 1;
+    &:has([data-cms-tool="cms-grid-swap-content-element"]) {
+      --_cms-children-zIndex: -1;
+    }
+    & > .wrapper {
+      // width: 100%;
+    }
+
+    // &:has([data-cms-tool="add-grid-button"]:hover) {
+    //   &,
+    //   *:not([data-cms-tool="add-grid-button"], [data-cms-tool="add-grid-button"] *) {
+    //     pointer-events: none !important;
+    //   }
+    // }
+
+    & [data-div-type="grid"] {
+      word-break: break-all;
+      position: var(--_p-relative);
+      & > .wrapper {
+        height: 100% !important;
+        display: var(--_d-grid);
+      }
+      &#{$activeElementSelector} {
+        --_self-child-element-pointerEvents: all;
+      }
+
+      div {
+        &[data-div-type="cms-grid-wrapper"] {
+          & > div {
+            &#{$activeElementSelector}[data-div-type="element"] {
+              z-index: var(--_higher-zIndex);
+              position: var(--_p-relative);
+            }
+          }
+        }
+      }
+      & * {
+        // position: var(--_p-relative);
+        // z-index: var(--_cms-children-zIndex);
+        // pointer-events: var(--_self-child-element-pointerEvents, none);
+      }
+
+      div {
+        &[data-div-type="element"] {
+          pointer-events: var(--_self-child-inside-element-pointerEvents, none);
+          position: var(--_p-relative);
+          &:has([data-is-rendering="false"]) {
+            background: transparent !important;
+            border: none !important;
+          }
+          & > .wrapper {
+            &[data-is-rendering="false"] {
+              opacity: 0 !important;
+            }
+          }
+          &:not(#{$activeElementSelector}) {
+            pointer-events: none !important;
+            --_self-child-inside-element-pointerEvents: all;
+            cursor: move;
+            & > .wrapper {
+              border: none;
+              & > div {
+                &[data-cms-tool="cms-element-resizer"] {
+                  --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-none));
+                  --_sf-rsr-op-ac-vl: var(--_sf-rsr-op-ac-dr-vl, 0);
+                  --_sf-rsr-vt-ac-vl: var(--_sf-rsr-vt-ac-dr-vl, hidden);
+                }
+              }
+            }
+          }
+          &#{$activeElementSelector} {
+            --_self-child-inside-element-pointerEvents: all;
+            pointer-events: all !important;
+            z-index: var(--_higher-zIndex);
+            cursor: move;
+            & > div {
+              &[data-layer-div-type="element"] {
+                --_sf-nw-dp-vl: var(--_d-none);
+                --_sf-nw-op-vl: -1;
+              }
+            }
+            &:is(#{$dropElementSelector}):not(:has(#{$activeElementSelector})),
+            &:not(#{$dropElementSelector}) {
+              & > .wrapper {
+                border: var(--_sf-el-wr-br-at-vl, none);
+                & > div {
+                  &[data-cms-tool="cms-element-resizer"] {
+                    --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-flex));
+                    --_sf-rsr-op-ac-vl: var(--_sf-rsr-op-ac-dr-vl, 1);
+                    --_sf-rsr-vt-ac-vl: var(--_sf-rsr-vt-ac-dr-vl, visible);
+                  }
+                }
+              }
+            }
+            // &:is([data-drop-element="cms-drop-element"]) {
+            //   &:not(:has([data-has-clicked="true"])) {
+            //     & > .wrapper {
+            //       border: var(--_sf-el-wr-br-at-vl, none);
+            //       & > div {
+            //         &[data-cms-tool="cms-element-resizer"] {
+            //           --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-flex));
+            //           --_sf-rsr-op-ac-vl: var(--_sf-rsr-op-ac-dr-vl, 1);
+            //           --_sf-rsr-vt-ac-vl: var(--_sf-rsr-vt-ac-dr-vl, visible);
+            //         }
+            //       }
+            //     }
+            //   }
+            // }
+            // &:not([data-drop-element="cms-drop-element"]) {
+            //   & > .wrapper {
+            //     border: var(--_sf-el-wr-br-at-vl, none);
+            //     & > div {
+            //       &[data-cms-tool="cms-element-resizer"] {
+            //         --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-flex));
+            //         --_sf-rsr-op-ac-vl: var(--_sf-rsr-op-ac-dr-vl, 1);
+            //         --_sf-rsr-vt-ac-vl: var(--_sf-rsr-vt-ac-dr-vl, visible);
+            //       }
+            //     }
+            //   }
+            // }
+            &:not(:has(#{$activeElementSelector})) {
+              // &:not(:has([data-has-clicked="true"][data-layer-div-type="element"])) {
+              // & > .wrapper {
+              //   border: var(--_sf-el-wr-br-at-vl, none);
+              //   & > div {
+              //     &[data-cms-tool="cms-element-resizer"] {
+              //       --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-flex));
+              //       --_sf-rsr-op-ac-vl: var(--_sf-rsr-op-ac-dr-vl, 1);
+              //       --_sf-rsr-vt-ac-vl: var(--_sf-rsr-vt-ac-dr-vl, visible);
+              //     }
+              //   }
+              // }
+            }
+            &:has([data-cms-element-resizer="true"]) {
+              pointer-events: none;
+            }
+            // & > .wrapper {
+            //   border: var(--_sf-el-wr-br-at-vl, none);
+            //   & > div {
+            //     &[data-cms-tool="cms-element-resizer"] {
+            //       --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-flex));
+            //       --_sf-rsr-op-ac-vl: var(--_sf-rsr-op-ac-dr-vl, 1);
+            //       --_sf-rsr-vt-ac-vl: var(--_sf-rsr-vt-ac-dr-vl, visible);
+            //     }
+            //   }
+            // }
+          }
+          &[data-element-type="container"] {
+            &:has(#{$activeElementSelector}) {
+              --_sf-ct-pi-nw: none;
+            }
+            & > .wrapper {
+              &[data-div-type="cms-container-wrapper"] {
+                display: var(--_d-grid);
+                height: 100%;
+                pointer-events: var(--_sf-ct-pi-nw);
+                // &,
+                // * {
+                // }
+              }
+            }
+          }
+          &[data-cms-element-resizer="true"] {
+            --_sf-rsr-op-ac-vl-cr-sp: 0;
+            --_sf-rsr-dt-vl-dp: var(--_d-flex);
+          }
+          &[data-cms-element-dragging="true"] {
+            --_sf-rsr-dp-vl: var(--_d-none);
+            --_sf-rsr-op-ac-dr-vl: 0;
+            --_sf-rsr-vt-ac-dr-vl: hidden;
+            --_sf-el-wr-br-at-vl: 1px solid var(--_accent-color-2-500);
+            * {
+              pointer-events: none;
+            }
+          }
+        }
+      }
+    }
+
+    [class="wrapper-layer"],
+    [data-type="wrapper-layer"] {
+      position: var(--_p-absolute);
+      visibility: hidden;
+      display: var(--_d-none);
+    }
+  }
+
+  div {
+    &[data-cms-tool="cms-grid-swap-content-element"] {
+      position: var(--_p-absolute) !important;
+      left: 50%;
+      top: 0;
+      transform: translateX(-50%);
+      background: var(--_primary-600);
+      color: var(--_base-white);
+      border-radius: 0 0 4px 4px;
+      padding: 4px 8px;
+      font-size: 12px;
+      width: max-content;
+      line-height: 1;
+      font-weight: 700;
+      text-transform: uppercase;
+      z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex));
+    }
+  }
+}
+
+[data-cms-tool="cms-custom-tooltip"] {
+  background: var(--_primary-100);
+  color: var(--_primary-600);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 4px 8px;
+  border-radius: 4px;
+  // position: var(--_p-absolute);
+  position: var(--_p-fixed);
+  left: calc(1px * var(--_cms-tooltip-left));
+  top: calc(1px * var(--_cms-tooltip-top));
+  transform: translate(25%, 100%);
+  z-index: var(--_higher-zIndex);
+}

package/dist/embed-temp.scss

@@ -0,0 +1,58 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="embed"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+    // height: ;
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    --_aspect-ratio: calc(
+      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    );
+
+    & > .wrapper {
+      width: 100%;
+      height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    .embed-element {
+      background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
+      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      display: flex;
+      flex-direction: column;
+      --_sf-gp: 16px;
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+      row-gap: var(--_sf-gp);
+      width: 100%;
+      height: 100%;
+      border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
+      border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
+      border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
+      border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
+          var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
+      );
+
+      // transform: scale(var(--_ctm-dn-zm-ie));
+      scale: var(--_ctm-dn-zm-ie);
+      &[data-flip-x="true"] {
+        transform: scaleX(-1);
+      }
+      &[data-flip-y="true"] {
+        transform: scaleY(-1);
+      }
+    }
+  }
+}

package/dist/faq.scss

@@ -0,0 +1,242 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="faq"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    // width: 50%;
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
+    // height: var(--_ctm-lt-ht);
+    // height: ;
+    // height: auto;
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    --_aspect-ratio: calc(
+      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    );
+
+    & > .wrapper {
+      // width: 100%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    .accordion-element {
+      background-color: var(--_ctm-dn-fq-wt-bd-cr, var(--_tst-dn-fq-wt-bd-cr));
+      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      display: flex;
+      flex-direction: column;
+      --_sf-gp: var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px);
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+      row-gap: var(--_sf-gp);
+      width: 100%;
+      // height: 100%;
+      border-color: var(--_ctm-dn-fq-wt-br-cr, var(--_tst-dn-fq-wt-br-cr));
+      border-style: var(--_ctm-dn-fq-wt-br-se, var(--_tst-dn-fq-wt-br-se));
+      border-width: var(--_ctm-dn-fq-wt-br-wh, var(--_tst-dn-fq-wt-br-wh));
+      border-radius: var(--_ctm-dn-fq-wt-br-rs, var(--_tst-dn-fq-wt-br-rs));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-dn-fq-wt-sw-ae, var(--_tst-dn-fq-wt-sw-ae))
+          var(--_ctm-dn-fq-wt-sw-br, var(--_tst-dn-fq-wt-sw-br))
+          var(--_ctm-dn-fq-wt-sw-sd, var(--_tst-dn-fq-wt-sw-sd))
+          var(--_ctm-dn-fq-wt-sw-cr, var(--_tst-dn-fq-wt-sw-cr))
+      );
+
+      &[data-divider-show="true"] {
+        --_sf-dvdr: var(--_ctm-dn-dr-dr-wh, 1px) var(--_ctm-dn-dr-br-se, solid)
+          var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
+        --_sf-dvdr-gap: var(--_sf-gp);
+      }
+      &[data-icon-position="Left"] {
+        --_sf-fd: row-reverse;
+        --_sf-jc: flex-end;
+      }
+      &[data-show-icon="false"] {
+        --_sf-show-icon-ff: none;
+      }
+    }
+
+    .accordion-item {
+      width: 100%;
+      display: grid;
+      overflow: clip;
+      // height: 30px;
+      gap: var(--_ctm-lt-te-ad-dn-sg, var(--_tst-lt-te-ad-dc-sg));
+
+      padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
+
+      grid-template-rows: var(
+        --_self-active-gtr,
+        minmax(var(--_ctm-dn-cd-an-im-in-se, var(--_tst-dn-in-in-se, 50px)), auto) 0px
+      );
+      // transition: grid-template-rows 0.45s ease-in-out;
+
+      --_sf-pd-cd: var(--_sf-dvdr-gap);
+      // updated css
+      border-color: var(--_ctm-dn-cd-an-im-br-cr, var(--_tst-dn-cd-an-im-br-cr));
+      border-style: var(--_ctm-dn-cd-an-im-br-se, var(--_tst-dn-cd-an-im-br-se));
+      border-width: var(--_ctm-dn-cd-an-im-br-wh, var(--_tst-dn-cd-an-im-br-wh));
+      border-radius: var(--_ctm-dn-cd-an-im-br-rs, var(--_tst-dn-cd-an-im-br-rs));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-dn-cd-an-im-sw-ae, var(--_tst-dn-cd-an-im-sw-ae))
+          var(--_ctm-dn-cd-an-im-sw-br, var(--_tst-dn-cd-an-im-sw-br))
+          var(--_ctm-dn-cd-an-im-sw-sd, var(--_tst-dn-cd-an-im-sw-sd))
+          var(--_ctm-dn-cd-an-im-sw-cr, var(--_tst-dn-cd-an-im-sw-cr))
+      );
+
+      // &:not(:last-of-type) {
+      //   &::after {
+      //     content: "";
+      //     height: var(--_ctm-dn-dr-dr-wh, 1px);
+      //     background-color: var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
+
+      //     // border-block-end: var(--_sf-dvdr);
+      //   }
+      // }
+
+      .accordion-title {
+        display: flex;
+        flex-direction: var(--_sf-fd, row);
+        align-content: center;
+        gap: var(--_sf-cd-gp);
+        align-items: center;
+        justify-content: var(--_sf-jc, space-between);
+        cursor: pointer;
+        padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
+        background-color: var(--_ctm-dn-cd-an-im-bd-cr, var(--_tst-dn-cd-an-im-bd-cr));
+        padding-inline: var(--_ctm-lt-im-hl-pg, var(--_tst-lt-im-hl-pg));
+
+        p {
+          // padding-inline: var(--_sf-cd-gp);
+          color: var(--_ctm-dn-cd-an-im-cr, var(--_tst-dn-cd-an-im-cr));
+          font-family: var(--_ctm-dn-cd-an-im-ft-fy, var(--_tst-dn-cd-an-im-ft-fy)), sans-serif;
+          font-size: var(--_ctm-dn-cd-an-im-ft-se, var(--_tst-dn-cd-an-im-ft-se));
+          font-weight: var(--_ctm-dn-cd-an-im-ft-wt, var(--_tst-dn-cd-an-im-ft-wt));
+          font-style: var(--_ctm-dn-cd-an-im-ft-se-ic, var(--_tst-dn-cd-an-im-ft-se-ic));
+          text-align: var(--_ctm-dn-cd-an-im-tt-an, var(--_tst-dn-cd-an-im-tt-an));
+          letter-spacing: var(--_ctm-dn-cd-an-im-lr-sg, var(--_tst-dn-cd-an-im-lr-sg));
+          line-height: var(--_ctm-dn-cd-an-im-le-ht, var(--_tst-dn-cd-an-im-le-ht));
+          text-decoration: var(--_ctm-dn-cd-an-im-ue);
+        }
+        .icon {
+          display: var(--_sf-show-icon-ff, flex);
+          svg {
+            width: var(--_ctm-dn-cd-an-im-in-se, var(--_tst-dn-cd-an-im-in-se));
+            height: var(--_ctm-dn-cd-an-im-in-se, var(--_tst-dn-cd-an-im-in-se));
+            path {
+              stroke: var(--_ctm-dn-cd-an-im-in-c1, var(--_tst-dn-cd-an-im-in-c1));
+            }
+          }
+        }
+      }
+      // .accordion-description {
+      //   // margin-block-start: calc(-1 * var(--_sf-dc-mb));
+      //   padding-block-end: var(--_sf-dc-pd-bt);
+      //   p {
+      //     color: var(--_ctm-dn-cd-an-im-cr-dc, var(--_tst-dn-cd-an-im-cr-dc));
+      //     font-family: var(--_ctm-dn-cd-an-im-ft-fy-dc, var(--_tst-dn-cd-an-im-ft-fy-dc)),
+      //       sans-serif;
+      //     font-size: var(--_ctm-dn-cd-an-im-ft-se-dc, var(--_tst-dn-cd-an-im-ft-se-dc));
+      //     font-weight: var(--_ctm-dn-cd-an-im-ft-wt-dc, var(--_tst-dn-cd-an-im-ft-wt-dc));
+      //     font-style: var(--_ctm-dn-cd-an-im-ft-se-ic-dc, var(--_tst-dn-cd-an-im-ft-se-ic-dc));
+      //     text-align: var(--_ctm-dn-cd-an-im-tt-an-dc, var(--_tst-dn-cd-an-im-tt-an-dc));
+      //     letter-spacing: var(--_ctm-dn-cd-an-im-lr-sg-dc, var(--_tst-dn-cd-an-im-lr-sg-dc));
+      //     line-height: var(--_ctm-dn-cd-an-im-le-ht-dc, var(--_tst-dn-cd-an-im-le-ht-dc));
+      //   }
+      // }
+
+      &[data-state="open"] {
+        // overflow: inherit;
+        // height: auto;
+
+        --_self-active-gtr: minmax(var(--_ctm-dn-cd-an-im-in-se, var(--_tst-dn-in-in-se)), auto)
+          minmax(50px, auto);
+
+        --_sf-dc-pd: var(--_sf-dvdr-gap, var(--_sf-cd-gp));
+        --_sf-dc-mb: var(--_sf-cd-gp);
+        --_sf-tt-pd: 0px;
+        --_sf-dc-pd-bt: var(--_sf-dvdr-gap, 0px);
+
+        border-color: var(--_ctm-dn-ed-an-im-br-cr, var(--_tst-dn-ed-an-im-br-cr));
+        border-style: var(--_ctm-dn-ed-an-im-br-se, var(--_tst-dn-ed-an-im-br-se));
+        border-width: var(--_ctm-dn-ed-an-im-br-wh, var(--_tst-dn-ed-an-im-br-wh));
+        border-radius: var(--_ctm-dn-ed-an-im-br-rs, var(--_tst-dn-ed-an-im-br-rs));
+        box-shadow: var(
+          --_show-shadow,
+          var(--_ctm-dn-ed-an-im-sw-ae, var(--_tst-dn-ed-an-im-sw-ae))
+            var(--_ctm-dn-ed-an-im-sw-br, var(--_tst-dn-ed-an-im-sw-br))
+            var(--_ctm-dn-ed-an-im-sw-sd, var(--_tst-dn-ed-an-im-sw-sd))
+            var(--_ctm-dn-ed-an-im-sw-cr, var(--_tst-dn-ed-an-im-sw-cr))
+        );
+        .accordion-title {
+          display: flex;
+          flex-direction: var(--_sf-fd, row);
+          align-content: center;
+          gap: var(--_sf-cd-gp);
+          align-items: center;
+          justify-content: var(--_sf-jc, space-between);
+          cursor: pointer;
+          padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
+          background-color: var(--_ctm-dn-ed-an-im-bd-cr, var(--_tst-dn-ed-an-im-bd-cr));
+
+          p {
+            // padding-inline: var(--_sf-cd-gp);
+            color: var(--_ctm-dn-ed-an-im-cr, var(--_tst-dn-ed-an-im-cr));
+            font-family: var(--_ctm-dn-ed-an-im-ft-fy, var(--_tst-dn-ed-an-im-ft-fy)), sans-serif;
+            font-size: var(--_ctm-dn-ed-an-im-ft-se, var(--_tst-dn-ed-an-im-ft-se));
+            font-weight: var(--_ctm-dn-ed-an-im-ft-wt, var(--_tst-dn-ed-an-im-ft-wt));
+            font-style: var(--_ctm-dn-ed-an-im-ft-se-ic, var(--_tst-dn-ed-an-im-ft-se-ic));
+            text-align: var(--_ctm-dn-ed-an-im-tt-an, var(--_tst-dn-ed-an-im-tt-an));
+            letter-spacing: var(--_ctm-dn-ed-an-im-lr-sg, var(--_tst-dn-ed-an-im-lr-sg));
+            line-height: var(--_ctm-dn-ed-an-im-le-ht, var(--_tst-dn-ed-an-im-le-ht));
+            text-decoration: var(
+              --_ctm-dn-ed-an-im-lh,
+              var(--_ctm-dn-ed-an-im-ue),
+              var(--_tst-dn-cd-an-im-lh)
+            );
+          }
+          .icon {
+            display: var(--_sf-show-icon-ff, flex);
+            svg {
+              width: var(--_ctm-dn-ed-an-im-in-se, var(--_tst-dn-ed-an-im-in-se));
+              height: var(--_ctm-dn-ed-an-im-in-se, var(--_tst-dn-ed-an-im-in-se));
+              path {
+                stroke: var(--_ctm-dn-ed-an-im-in-c1, var(--_tst-dn-ed-an-im-in-c1));
+              }
+            }
+          }
+        }
+        .accordion-description {
+          padding-block-end: var(--_sf-dc-pd-bt);
+          background-color: var(--_ctm-dn-ed-an-im-bd-cr-dc, var(--_tst-dn-cd-an-im-bd-cr-dc));
+          padding-inline: var(--_ctm-lt-im-hl-pg, var(--_tst-lt-im-hl-pg));
+
+          p {
+            color: var(--_ctm-dn-ed-an-im-cr-dc, var(--_tst-dn-ed-an-im-cr));
+            font-family: var(--_ctm-dn-ed-an-im-ft-fy-dc, var(--_tst-dn-ed-an-im-ft-fy)), sans-serif;
+            font-size: var(--_ctm-dn-ed-an-im-ft-se-dc, var(--_tst-dn-ed-an-im-ft-se));
+            font-weight: var(--_ctm-dn-ed-an-im-ft-wt-dc, var(--_tst-dn-ed-an-im-ft-wt));
+            font-style: var(--_ctm-dn-ed-an-im-ft-se-ic-dc, var(--_tst-dn-ed-an-im-ft-se-ic));
+            text-align: var(--_ctm-dn-ed-an-im-tt-an-dc, var(--_tst-dn-ed-an-im-tt-an));
+            letter-spacing: var(--_ctm-dn-ed-an-im-lr-sg-dc, var(--_tst-dn-ed-an-im-lr-sg));
+            line-height: var(--_ctm-dn-ed-an-im-le-ht-dc, var(--_tst-dn-ed-an-im-le-ht));
+            text-decoration: var(
+              --_ctm-dn-ed-an-im-lh-dc,
+              var(--_ctm-dn-ed-an-im-ue-dc),
+              var(--_tst-dn-cd-an-im-lh-dc)
+            );
+          }
+        }
+      }
+    }
+  }
+}