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

package/dist/button.scss

@@ -48,6 +48,7 @@
       --_sf-hr-ic-wt: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
       --_sf-hr-ic-ht: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
       --_sf-hr-ic-st: var(--_ctm-dn-hr-se-in-c1, var(--_tst-dn-hr-se-in-c1));
+      --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
 
       &[data-hover-show-shadow="false"] {
         --_hover-show-shadow: none;
@@ -78,15 +79,14 @@
       display: flex;
       flex-direction: var(--_sf-fd-bn);
       align-items: center;
-      justify-content: var(--_sf-jc, center);
+      // justify-content: var(--_sf-jc, center);
+      justify-content: var(--_ctm-lt-tt-an, center);
       gap: var(--_ctm-lt-gp, var(--_tst-lt-gp));
 
       width: 100%;
       height: 100%;
-      border-color: var(--_sf-hr-br-cr, var(--_ctm-dn-dt-se-br-cr, var(--_tst-dn-dt-se-br-cr)));
-      border-style: var(--_sf-hr-br-st, var(--_ctm-dn-dt-se-br-se, var(--_tst-dn-dt-se-br-se)));
-      border-width: var(--_sf-hr-br-wt, var(--_ctm-dn-dt-se-br-wh, var(--_tst-dn-dt-se-br-wh)));
-      border-radius: var(--_sf-hr-br-br, var(--_ctm-dn-dt-se-br-rs, var(--_tst-dn-dt-se-br-rs)));
+
+      border-radius: var(--_sf-hr-br-br, var(--_ctm-dn-dt-se-br-rs, var(--s_tst-dn-dt-se-br-rs)));
       box-shadow: var(
         --_hover-show-shadow,
         var(
@@ -100,40 +100,81 @@
           )
         )
       );
-      &.btn__with__text__icon {
-        justify-content: center;
-        // gap: 10px;
+      &[data-show-border="true"] {
+        border-color: var(--_sf-hr-br-cr, var(--_ctm-dn-dt-se-br-cr, var(--_tst-dn-dt-se-br-cr)));
+        border-style: var(--_sf-hr-br-st, var(--_ctm-dn-dt-se-br-se, var(--_tst-dn-dt-se-br-se)));
+        border-width: var(--_sf-hr-br-wt, var(--_ctm-dn-dt-se-br-wh, var(--_tst-dn-dt-se-br-wh)));
       }
-      & > span {
-        align-items: center;
-        justify-content: center;
-        &.txt {
-          display: flex;
-          color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
-          font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
-            sans-serif;
-          font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
-          font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
-          font-style: var(
-            --_sf-hr-ft,
-            var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic))
-          );
-          text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
-          letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
-          line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
-        }
+      // &.btn__with__text__icon {
+      //   justify-content: center;
+      //   // gap: 10px;
+      // }
+      // & > span {
+      //   align-items: center;
+      //   justify-content: center;
+      //   &.txt {
+      //     display: flex;
+      //     color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
+      //     font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
+      //       sans-serif;
+      //     font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
+      //     font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
+      //     font-style: var(
+      //       --_sf-hr-ft,
+      //       var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic))
+      //     );
+      //     text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
+      //     letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
+      //     line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
+      //     text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
+      //     // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
+      //   }
+
+      //   &.icon {
+      //     display: var(--_hover-show-icon, var(--_show-icon, flex));
+      //     svg {
+      //       width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
+      //       height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
+      //       path {
+      //         stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
+      //       }
+      //     }
+      //   }
+      //   &[data-element-style="Text"] {
+      //     display: inline-block;
+      //     width: 100%;
+      //   }
+      // }
 
-        &.icon {
-          display: var(--_hover-show-icon, var(--_show-icon, flex));
-          svg {
-            width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-            height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-            path {
-              stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
-            }
+      .txt {
+        display: flex;
+        color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
+        font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
+          sans-serif;
+        font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
+        font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
+        font-style: var(--_sf-hr-ft, var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic)));
+        text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
+        letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
+        line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
+        text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
+        // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
+      }
+
+      .icon {
+        display: var(--_hover-show-icon, var(--_show-icon, flex));
+        svg {
+          width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
+          height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
+          path {
+            stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
           }
         }
       }
+      [data-element-style="Text"] {
+        display: inline-block;
+        width: 100%;
+      }
     }
   }
 }

package/dist/code-temp.scss

@@ -0,0 +1,58 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="code"] {
+    // 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;
+    }
+
+    .code-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/container.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "sass:list";
+[data-div-type="element"] {
+  &[data-element-type="container"] {
+    width: var(--_sf-con-nw-wh);
+    // width: 100%;
+    // height: var(--_ctm-con-lt-ht);
+    margin: var(--_ctm-con-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
+    background: var(--_ctm-con-dn-bd-cr);
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+      }
+    }
+  }
+}

package/dist/countdown.scss

@@ -0,0 +1,378 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="countdown"] {
+    // 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%;
+      // overflow: clip;
+      height: 100%;
+      &[data-widget-shadow="true"] {
+        box-shadow: var(--_ctm-dn-cn-wt-sw-ae, var(--_tst-dn-cn-wt-sw-ae))
+          var(--_ctm-dn-cn-wt-sw-br, var(--_tst-vo-se-sw-br))
+          var(--_ctm-dn-cn-wt-sw-sd, var(--_tst-vo-se-sw-sd))
+          var(--_ctm-dn-cn-wt-sw-cr, var(--_tst-dn-cn-wt-sw-cr));
+      }
+    }
+    &[data-text-container-border="true"] {
+      .content__container {
+        border-color: var(--_ctm-dn-cn-wt-tt-cr-dn-br-cr, var(--_tst-dn-cn-wt-tt-cr-dn-br-cr));
+        border-style: var(--_ctm-dn-cn-wt-tt-cr-dn-br-se, var(--_tst-dn-cn-wt-tt-cr-dn-br-se));
+        border-width: var(--_ctm-dn-cn-wt-tt-cr-dn-br-wh, var(--_tst-dn-cn-wt-tt-cr-dn-br-wh));
+      }
+    }
+    &[data-text-container-shadow="true"] {
+      .content__container {
+        box-shadow: var(--_ctm-dn-cn-wt-tt-cr-dn-sw-ae, var(--_tst-dn-cn-wt-tt-cr-dn-sw-ae))
+          var(--_ctm-dn-cn-wt-tt-cr-dn-sw-br, var(--_tst-vo-se-sw-br))
+          var(--_ctm-dn-cn-wt-tt-cr-dn-sw-sd, var(--_tst-vo-se-sw-sd))
+          var(--_ctm-dn-cn-wt-tt-cr-dn-sw-cr, var(--_tst-dn-cn-wt-tt-cr-dn-sw-cr));
+      }
+    }
+
+    &[data-widget-border="true"] {
+      .countdown__container {
+        border-color: var(--_ctm-dn-cn-wt-br-cr, var(--_tst-dn-cn-wt-br-cr));
+        border-style: var(--_ctm-dn-cn-wt-br-se, var(--_tst-dn-cn-wt-br-se));
+        border-width: var(--_ctm-dn-cn-wt-br-wh, var(--_tst-dn-cn-wt-br-wh));
+      }
+    }
+
+    &[data-counter-shadow="true"] {
+      .countdown__element {
+        box-shadow: var(--_ctm-dn-cr-se-sw-ae, var(--_tst-dn-cr-se-sw-ae))
+          var(--_ctm-dn-cr-se-sw-br, var(--_tst-vo-se-sw-br))
+          var(--_ctm-dn-cr-se-sw-sd, var(--_tst-vo-se-sw-sd))
+          var(--_ctm-dn-cr-se-sw-cr, var(--_tst-dn-cr-se-sw-cr));
+      }
+    }
+
+    &[data-counter-border="true"] {
+      .countdown__element {
+        border-color: var(--_ctm-dn-cr-se-br-cr, var(--_tst-dn-cr-se-br-cr));
+        border-style: var(--_ctm-dn-cr-se-br-se, var(--_tst-dn-cr-se-br-se));
+        border-width: var(--_ctm-dn-cr-se-br-wh, var(--_tst-dn-cr-se-br-wh));
+      }
+    }
+    &[data-counter-type="joined"] {
+      .countdown__element {
+        background-color: var(--_ctm-dn-cr-se-bd-cr, var(--_tst-dn-cr-se-bd-cr));
+      }
+    }
+    &[data-text-container-alignment="left"] {
+      .content__container {
+        align-items: flex-start;
+      }
+    }
+    &[data-text-container-alignment="center"] {
+      .content__container {
+        align-items: center;
+      }
+    }
+    &[data-text-container-alignment="right"] {
+      .content__container {
+        align-items: flex-end;
+      }
+    }
+    &[data-text-position="top"] {
+      .countdown__container {
+        flex-direction: column;
+      }
+    }
+
+    &[data-text-position="bottom"] {
+      .countdown__container {
+        flex-direction: column-reverse;
+      }
+    }
+    &[data-text-position="left"] {
+      .countdown__container {
+        flex-direction: row;
+      }
+      &[data-widget-alignment="center"] {
+        .countdown__container {
+          align-items: center;
+        }
+      }
+      &[data-widget-alignment="bottom"] {
+        .countdown__container {
+          align-items: flex-end;
+        }
+      }
+      &[data-widget-alignment="top"] {
+        .countdown__container {
+          align-items: flex-start;
+        }
+      }
+    }
+    &[data-text-position="right"] {
+      .countdown__container {
+        flex-direction: row-reverse;
+      }
+      &[data-widget-alignment="center"] {
+        .countdown__container {
+          align-items: center;
+        }
+      }
+      &[data-widget-alignment="bottom"] {
+        .countdown__container {
+          align-items: flex-end;
+        }
+      }
+      &[data-widget-alignment="top"] {
+        .countdown__container {
+          align-items: flex-start;
+        }
+      }
+    }
+
+    &[data-counter-type="seperate"] {
+      .countdown__element .countdown__digit-box {
+        background-color: var(--_ctm-dn-cr-se-bd-cr, var(--_tst-dn-cr-se-bd-cr));
+      }
+    }
+
+    &[data-countdown-animation="fadeIn"] {
+      .animation:nth-child(2) {
+        animation: fadeIn 1s infinite;
+      }
+    }
+
+    &[data-countdown-animation="flip"] {
+      .animation:nth-child(2) {
+        display: inline-block; /* Ensures the element is treated as a block for transform purposes */
+        animation: flip 1s ease-in-out infinite; /* Animation duration, timing, and repeat count */
+        // transform-style: preserve-3d; /* Enables 3D effect */
+        backface-visibility: hidden; /* Hides the back side when flipped */
+      }
+    }
+
+    .countdown__container {
+      display: flex;
+      height: 100%;
+      gap: var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg, var(--_tst-dn-cn-lt-wt-tt-ad-im-sg));
+      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      background-color: var(--_ctm-dn-cn-wt-bd-cr, var(--_tst-dn-cn-wt-bd-cr));
+      border-radius: var(--_ctm-dn-cn-wt-br-rs, var(--_tst-dn-cn-wt-br-rs));
+
+      .content__container {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--_ctm-dn-cn-wt-tt-cr-dn-bd-cr, var(--_tst-dn-cn-wt-tt-cr-dn-bd-cr));
+        border-radius: var(--_ctm-dn-cn-wt-tt-cr-dn-br-rs, var(--_tst-dn-cn-wt-tt-cr-dn-br-rs));
+        padding: var(--_ctm-dn-cn-wt-tt-cr-lt-tt-vl-pg, var(--_tst-dn-cn-wt-tt-cr-lt-tt-vl-pg))
+          var(--_ctm-dn-cn-wt-tt-cr-lt-tt-hl-pg, var(--_tst-dn-cn-wt-tt-cr-lt-tt-hl-pg));
+        gap: var(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg, var(--_sts-dn-cn-wt-tt-cr-lt-te-ad-dn-sg));
+      }
+      .content__container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: var(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg, var(--_tst-dn-cn-wt-tt-cr-lt-te-ad-dn-sg));
+        h1 {
+          color: var(--_ctm-dn-cn-wt-cr, var(--_tst-dn-cn-wt-cr));
+          font-family: var(--_ctm-dn-cn-wt-ft-fy, var(--_tst-dn-cn-wt-ft-fy)), sans-serif;
+          font-size: var(--_ctm-dn-cn-wt-ft-se, var(--_tst-dn-cn-wt-ft-se));
+          font-weight: var(--_ctm-dn-cn-wt-ft-wt, var(--_tst-dn-cn-wt-ft-wt));
+          font-style: var(--_ctm-dn-cn-wt-ft-se-ic, var(--_tst-dn-cn-wt-ft-se-ic));
+          text-align: var(--_ctm-dn-cn-wt-tt-an, var(--_tst-dn-cn-wt-tt-an));
+          letter-spacing: var(--_ctm-dn-cn-wt-lr-sg, var(--_tst-dn-cn-wt-lr-sg));
+          line-height: var(--_ctm-dn-cn-wt-le-ht, var(--_tst-dn-cn-wt-le-ht));
+          text-decoration: var(
+            --_ctm-dn-cn-wt-lh,
+            var(--_ctm-dn-cn-wt-ue),
+            var(--_tst-dn-cn-wt-lh)
+          );
+        }
+        p {
+          color: var(--_ctm-dn-cn-wt-cr-dc, var(--_tst-dn-cn-wt-cr-dc));
+          font-family: var(--_ctm-dn-cn-wt-ft-fy-dc, var(--_tst-dn-cn-wt-ft-fy-dc)), sans-serif;
+          font-size: var(--_ctm-dn-cn-wt-ft-se-dc, var(--_tst-dn-cn-wt-ft-se-dc));
+          font-weight: var(--_ctm-dn-cn-wt-ft-wt-dc, var(--_tst-dn-cn-wt-ft-wt-dc));
+          font-style: var(--_ctm-dn-cn-wt-ft-se-ic-dc, var(--_tst-dn-cn-wt-ft-se-ic-dc));
+          text-align: var(--_ctm-dn-cn-wt-tt-an-dc, var(--_tst-dn-cn-wt-tt-an-dc));
+          letter-spacing: var(--_ctm-dn-cn-wt-lr-sg-dc, var(--_tst-dn-cn-wt-lr-sg-dc));
+          line-height: var(--_ctm-dn-cn-wt-le-ht-dc, var(--_tst-dn-cn-wt-le-ht-dc));
+          text-decoration: var(
+            --_ctm-dn-cn-wt-lh-dc,
+            var(--_ctm-dn-cn-wt-ue-dc),
+            var(--_tst-dn-cn-wt-lh)
+          );
+        }
+      }
+      .countdown {
+        width: 100%;
+        display: grid;
+        grid-auto-flow: column;
+        column-gap: 15px;
+        text-align: center;
+        &[data-text-align="left"] {
+          .countdown__element .countdown__digits {
+            justify-content: flex-start;
+          }
+        }
+        &[data-text-align="justify"] {
+          .countdown__element .countdown__digits {
+            justify-content: center;
+          }
+        }
+        &[data-text-align="center"] {
+          .countdown__element .countdown__digits {
+            justify-content: center;
+          }
+        }
+        &[data-text-align="right"] {
+          .countdown__element .countdown__digits {
+            justify-content: flex-end;
+          }
+        }
+      }
+      .countdown__element {
+        border-radius: var(--_ctm-dn-cr-se-br-rs, var(--_tst-dn-cr-se-br-rs));
+        padding: 5px;
+
+        label {
+          width: 100%;
+          display: inline-block;
+          color: var(--_ctm-dn-cr-se-cr, var(--_tst-dn-cr-se-cr));
+          font-family: var(--_ctm-dn-cr-se-ft-fy, var(--_tst-dn-cr-se-ft-fy)), sans-serif;
+          font-size: var(--_ctm-dn-cr-se-ft-se, var(--_tst-dn-cr-se-ft-se));
+          font-weight: var(--_ctm-dn-cr-se-ft-wt, var(--_tst-dn-cr-se-ft-wt));
+          font-style: var(--_ctm-dn-cr-se-ft-se-ic, var(--_tst-dn-cr-se-ft-se-ic));
+          text-align: var(--_ctm-dn-cr-se-tt-an, var(--_tst-dn-cr-se-tt-an));
+          letter-spacing: var(--_ctm-dn-cr-se-lr-sg, var(--_tst-dn-cr-se-lr-sg));
+          line-height: var(--_ctm-dn-cr-se-le-ht, var(--_tst-dn-cr-se-le-ht));
+          text-decoration: var(
+            --_ctm-dn-cr-se-lh,
+            var(--_ctm-dn-cr-se-ue),
+            var(--_tst-dn-cr-se-lh)
+          );
+        }
+        .countdown__digit-font {
+          margin-top: 2px;
+          width: 100%;
+          display: inline-block;
+          color: var(--_ctm-dn-cr-se-cr-dc, var(--_tst-dn-cr-se-cr-dc));
+          font-family: var(--_ctm-dn-cr-se-ft-fy-dc, var(--_tst-dn-cr-se-ft-fy-dc)), sans-serif;
+          font-size: var(--_ctm-dn-cr-se-ft-se-dc, var(--_tst-dn-cr-se-ft-se-dc));
+          font-weight: var(--_ctm-dn-cr-se-ft-wt-dc, var(--_tst-dn-cr-se-ft-wt-dc));
+          font-style: var(--_ctm-dn-cr-se-ft-se-ic-dc, var(--_tst-dn-cr-se-ft-se-ic-dc));
+          text-align: var(--_ctm-dn-cr-se-tt-an-dc, var(--_tst-dn-cr-se-tt-an-dc));
+          letter-spacing: var(--_ctm-dn-cr-se-lr-sg-dc, var(--_tst-dn-cr-se-lr-sg-dc));
+          line-height: var(--_ctm-dn-cr-se-le-ht-dc, var(--_tst-dn-cr-se-le-ht-dc));
+          text-decoration: var(
+            --_ctm-dn-cr-se-lh-dc,
+            var(--_ctm-dn-cr-se-ue-dc),
+            var(--_tst-dn-cr-se-lh)
+          );
+        }
+        .countdown__digits {
+          display: flex;
+          gap: 5px;
+          // justify-content: center;
+        }
+
+        .countdown__digit-box {
+          padding: 5px 10px;
+          border-radius: 3px;
+          width: auto;
+        }
+
+        .countdown label {
+          color: var(--_ctm-dn-cr-se-cr, var(--_tst-dn-cr-se-cr));
+          font-family: var(--_ctm-dn-cr-se-ft-fy, var(--_tst-dn-cr-se-ft-fy)), sans-serif;
+          font-size: var(--_ctm-dn-cr-se-ft-se, var(--_tst-dn-cr-se-ft-se));
+          font-weight: var(--_ctm-dn-cr-se-ft-wt, var(--_tst-dn-cr-se-ft-wt));
+          font-style: var(--_ctm-dn-cr-se-ft-se-ic, var(--_tst-dn-cr-se-ft-se-ic));
+          text-align: var(--_ctm-dn-cr-se-tt-an, var(--_tst-dn-cr-se-tt-an));
+          letter-spacing: var(--_ctm-dn-cr-se-lr-sg, var(--_tst-dn-cr-se-lr-sg));
+          line-height: var(--_ctm-dn-cr-se-le-ht, var(--_tst-dn-cr-se-le-ht));
+          text-decoration: var(
+            --_ctm-dn-cr-se-lh,
+            var(--_ctm-dn-cr-se-ue),
+            var(--_tst-dn-cr-se-lh)
+          );
+        }
+        .countdown p {
+          margin: 5px 0px;
+          font-weight: 700;
+          letter-spacing: 0.3rem;
+
+          color: var(--_ctm-dn-cr-se-cr-dc, var(--_tst-dn-cr-se-cr-dc));
+          font-family: var(--_ctm-dn-cr-se-ft-fy-dc, var(--_tst-dn-cr-se-ft-fy-dc)), sans-serif;
+          font-size: var(--_ctm-dn-cr-se-ft-se-dc, var(--_tst-dn-cr-se-ft-se-dc));
+          font-weight: var(--_ctm-dn-cr-se-ft-wt-dc, var(--_tst-dn-cr-se-ft-wt-dc));
+          font-style: var(--_ctm-dn-cr-se-ft-se-ic-dc, var(--_tst-dn-cr-se-ft-se-ic-dc));
+          text-align: var(--_ctm-dn-cr-se-tt-an-dc, var(--_tst-dn-cr-se-tt-an-dc));
+          letter-spacing: var(--_ctm-dn-cr-se-lr-sg-dc, var(--_tst-dn-cr-se-lr-sg-dc));
+          line-height: var(--_ctm-dn-cr-se-le-ht-dc, var(--_tst-dn-cr-se-le-ht-dc));
+          text-decoration: var(
+            --_ctm-dn-cr-se-lh-dc,
+            var(--_ctm-dn-cr-se-ue-dc),
+            var(--_tst-dn-cr-se-lh)
+          );
+        }
+      }
+      .separator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        svg {
+          width: var(--_ctm-dn-dr-se-se, var(--_tst-dn-dr-se-se));
+          height: var(--_ctm-dn-dr-se-se, var(--_tst-dn-dr-se-se));
+
+          path {
+            stroke: var(--_ctm-dn-dr-se-in-cr, var(--_tst-dn-dr-se-in-cr));
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  50% {
+    // transform: scale(0.5);
+    opacity: 1;
+  }
+  0% {
+    transform: scale3d(0.3, 0.3, 0.3);
+    opacity: 0;
+  }
+}
+@keyframes flip {
+  0% {
+    animation-timing-function: ease-out;
+    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+  }
+  40% {
+    animation-timing-function: ease-out;
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+  }
+  50% {
+    animation-timing-function: ease-in;
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+  }
+  80% {
+    animation-timing-function: ease-in;
+    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+  }
+  100% {
+    animation-timing-function: ease-in;
+    transform: perspective(400px);
+  }
+}