@sc-360-v2/storefront-cms-library 0.1.3 → 0.1.5

package/dist/scroll.scss

@@ -0,0 +1,157 @@
+@use "sass:map";
+@use "sass:list";
+
+$max-items: 50;
+
+[data-div-type="element"] {
+  &[data-element-type="scroll"] {
+    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+
+    & > .wrapper {
+      width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+      height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+      overflow: hidden;
+      white-space: nowrap;
+
+      &[data-widget-shadow="true"] {
+        box-shadow: var(--_ctm-dn-sl-cr-sw-ae, var(--_tst-dn-sl-cr-sw-ae))
+          var(--_ctm-dn-sl-cr-sw-br, var(--_tst-vo-se-sw-br))
+          var(--_ctm-dn-sl-cr-sw-sd, var(--_tst-vo-se-sw-sd))
+          var(--_ctm-dn-sl-cr-sw-cr, var(--_tst-dn-sl-cr-sw-cr));
+      }
+
+      // .scroll__container {
+      @for $i from 1 through $max-items {
+        .scroll-item[data-index="i#{$i}"] {
+          color: var(--_ctm-dn-i#{$i}-cr, black);
+          font-size: var(--_ctm-dn-i#{$i}-ft-se, 16px);
+          text-align: var(--_ctm-dn-i#{$i}-tt-an, left);
+          margin-left: var(--_ctm-dn-i#{$i}-lr-sg, 0px);
+
+          color: var(--_sf-hr-fc, var(--_ctm-dn-i#{$i}-cr, var(--_tst-dn-i#{$i}-cr)));
+          font-family: var(--_sf-hr-ff, var(--_ctm-dn-i#{$i}-ft-fy, var(--_tst-dn-i#{$i}-ft-fy))),
+            sans-serif;
+          font-size: var(--_sf-hr-fs, var(--_ctm-dn-i#{$i}-ft-se, var(--_tst-dn-i#{$i}-ft-se)));
+          text-decoration: var(--_ctm-dn-i#{$i}-ue, var(--_tst-dn-hr-tt-ue));
+          font-weight: var(--_sf-hr-fw, var(--_ctm-dn-i#{$i}-ft-wt, var(--_tst-dn-i#{$i}-ft-wt)));
+          font-style: var(
+            --_sf-hr-ft,
+            var(--_ctm-dn-i#{$i}-ft-se-ic, var(--_tst-dn-i#{$i}-ft-se-ic))
+          );
+          text-align: var(--_sf-hr-ta, var(--_ctm-dn-i#{$i}-tt-an, var(--_tst-dn-i#{$i}-tt-an)));
+          letter-spacing: var(
+            --_sf-hr-ls,
+            var(--_ctm-dn-i#{$i}-lr-sg, var(--_tst-dn-i#{$i}-lr-sg))
+          );
+          line-height: var(--_sf-hr-lh, var(--_ctm-dn-i#{$i}-le-ht, var(--_tst-dn-i#{$i}-le-ht)));
+        }
+        // }
+      }
+      &[data-pause-on-hover="true"] .scrolling {
+        &:hover {
+          animation-play-state: paused;
+        }
+      }
+
+      &[data-scroll-direction="leftToRight"] .scrolling {
+        animation-direction: normal;
+      }
+
+      &[data-scroll-direction="rightToLeft"] .scrolling {
+        animation-direction: reverse;
+      }
+
+      &[data-scroll-speed="0.5x"] .scrolling {
+        animation-duration: 20s;
+      }
+      &[data-scroll-speed="1x"] .scrolling {
+        animation-duration: 10s;
+      }
+      &[data-scroll-speed="2x"] .scrolling {
+        animation-duration: 5s;
+      }
+      &[data-scroll-speed="4x"] .scrolling {
+        animation-duration: 2.5s;
+      }
+
+      &[data-repeat-elements="true"] .scrolling {
+        animation-iteration-count: infinite;
+      }
+      &[data-repeat-elements="false"] .scrolling {
+        animation-iteration-count: 1;
+      }
+    }
+
+    &[data-widget-shadow="true"] .scroll__container {
+      box-shadow: var(--_ctm-dn-sl-cr-sw-ae, var(--_tst-dn-sl-cr-sw-ae))
+        var(--_ctm-dn-sl-cr-sw-br, var(--_tst-vo-se-sw-br))
+        var(--_ctm-dn-sl-cr-sw-sd, var(--_tst-vo-se-sw-sd))
+        var(--_ctm-dn-sl-cr-sw-cr, var(--_tst-dn-sl-cr-sw-cr));
+    }
+
+    &[data-widget-shadow="false"] .scroll__container {
+      box-shadow: none;
+    }
+
+    &[data-widget-border="true"] {
+      .scroll__container {
+        border-color: var(--_ctm-dn-sl-cr-br-cr, var(--_tst-dn-sl-cr-br-cr));
+        border-style: var(--_ctm-dn-sl-cr-br-se, var(--_tst-dn-sl-cr-br-se));
+        border-width: var(--_ctm-dn-sl-cr-br-wh, var(--_tst-dn-sl-cr-br-wh));
+      }
+    }
+
+    .scroll__container {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--_ctm-dn-sl-cr-bd-cr, var(--_tst-dn-sl-cr-bd-cr));
+      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      border-radius: var(--_ctm-dn-sl-cr-br-rs, var(--_tst-dn-sl-cr-br-rs));
+      .scrolling {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: var(--_ctm-lt-im-sg, var(--_tst-lt-im-sg));
+        padding-right: 10px;
+        animation-name: marquee;
+        animation-timing-function: linear;
+      }
+
+      .divider {
+        background-color: var(--_ctm-dn-dr-se-bd-cr, var(--_tst-dn-dr-se-bd-cr));
+        padding: 3px;
+        font-size: var(--_ctm-dn-dr-se-se, var(--_tst-dn-dr-se-se));
+        color: var(--_ctm-dn-dr-se-dr-cr, var(--_tst-dn-dr-se-dr-cr));
+      }
+      .icon {
+        background-color: var(--_ctm-dn-dr-se-bd-cr, var(--_tst-dn-dr-se-bd-cr));
+        padding: 3px;
+        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-dr-cr, var(--_tst-dn-dr-se-dr-cr));
+          }
+        }
+      }
+
+      @keyframes marquee {
+        0% {
+          transform: translateX(100%);
+        }
+        100% {
+          transform: translateX(-100%);
+        }
+      }
+    }
+  }
+}

package/dist/section.scss

@@ -0,0 +1,60 @@
+section {
+  &[data-div-type="section"] {
+    position: var(--_p-relative);
+    width: 100%;
+    display: var(--_d-flex) !important;
+    flex-direction: column;
+    justify-self: stretch;
+    align-self: stretch;
+    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))
+    );
+    box-shadow: var(
+      --_hide-section-shadow,
+      var(--_ctm-sec-dn-sw-ae, var(--_tst-dn-dt-se-sw-ae))
+        var(--_ctm-sec-dn-sw-br, var(--_tst-dn-dt-se-sw-br))
+        var(--_ctm-sec-dn-sw-sd, var(--_tst-dn-dt-se-sw-sd))
+        var(--_ctm-sec-dn-sw-cr, var(--_tst-dn-dt-se-sw-cr))
+    );
+    background: var(--_ctm-sec-dn-bd-cr, var(--_tst-sec-dn-bd-cr));
+    border-radius: var(--_ctm-sec-dn-br-rs, var(--_tst-dn-dt-se-br-rs)) !important;
+    &[data-show-shadow="false"] {
+      --_hide-section-shadow: none;
+    }
+    &[data-show-border="false"] {
+      --_hide-section-border: none;
+    }
+    & > div {
+      &[data-type="wrapper-layer"] {
+        display: var(--_d-flex) !important;
+        pointer-events: none;
+        visibility: visible !important;
+        inset: 0 0 0 0;
+        border-color: var(
+          --_hide-section-border,
+          var(--_ctm-sec-dn-br-cr, var(--_tst-dn-dt-se-br-cr))
+        );
+        border-style: var(
+          --_hide-section-border,
+          var(--_ctm-sec-dn-br-se, var(--_tst-dn-dt-se-br-se))
+        );
+        border-width: var(
+          --_hide-section-border,
+          var(--_ctm-sec-dn-br-wh, var(--_tst-dn-dt-se-br-wh))
+        );
+        border-radius: var(--_ctm-sec-dn-br-rs, var(--_tst-dn-dt-se-br-rs));
+      }
+      &[data-div-type="cms-section-wrapper"] {
+        max-width: var(--_sf-wp-mx-wt);
+        position: var(--_p-relative);
+        width: 100%;
+      }
+    }
+  }
+}

package/dist/social.scss

@@ -0,0 +1,166 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="social"] {
+    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    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%;
+      // background-color: var(--_ctm-dn-fl-ad-bd-bd-cr, var(--_tst-dn-fl-ad-bd-bd-cr));
+      // gap: var(--_ctm-lt-im-sg, var(--_tst-lt-im-sg));
+      // justify-content: var(--_justify-center);
+      // align-items: var(--_align-center);
+    }
+
+    &[data-social-alignment="horizontal"] {
+      .social__container {
+        flex-direction: row;
+      }
+    }
+
+    &[data-social-alignment="vertical"] {
+      .social__container {
+        flex-direction: column;
+      }
+    }
+    &[data-icon-style="Icon"] {
+      .social__container {
+        align-items: center;
+      }
+      &[data-item-alignment="left"] {
+        .social__container {
+          justify-content: flex-start;
+          align-items: center;
+        }
+      }
+      &[data-item-alignment="center"] {
+        .social__container {
+          justify-content: center;
+          align-items: center;
+        }
+      }
+      &[data-item-alignment="right"] {
+        .social__container {
+          justify-content: flex-end;
+          align-items: center;
+        }
+      }
+    }
+    &[data-icon-position="left"] {
+      .social__item {
+        flex-direction: row;
+      }
+    }
+    &[data-icon-position="right"] {
+      .social__item {
+        flex-direction: row-reverse;
+      }
+    }
+    &[data-icon-position="top"] {
+      .social__item {
+        flex-direction: column;
+      }
+    }
+    &[data-icon-position="bottom"] {
+      .social__item {
+        flex-direction: column-reverse;
+      }
+    }
+    &[data-item-alignment="left"] {
+      .social__item {
+        align-items: flex-start;
+      }
+    }
+    &[data-item-alignment="center"] {
+      .social__item {
+        align-items: center;
+      }
+    }
+    &[data-item-alignment="right"] {
+      .social__item {
+        align-items: flex-end;
+      }
+    }
+
+    &[data-widget-border="true"] {
+      .social__container {
+        border-color: var(--_ctm-dn-sl-wt-br-cr, var(--_tst-dn-sl-wt-br-cr));
+        border-style: var(--_ctm-dn-sl-wt-br-se, var(--_tst-dn-sl-wt-br-se));
+        border-width: var(--_ctm-dn-sl-wt-br-wh, var(--_tst-dn-sl-wt-br-wh));
+      }
+    }
+    &[data-widget-shadow="true"] {
+      .social__container {
+        box-shadow: var(
+          --_show-shadow,
+          var(--_ctm-dn-sl-wt-sw-ae, var(--_tst-dn-sl-wt-sw-ae))
+            var(--_ctm-dn-sl-wt-sw-br, var(--_tst-vo-se-sw-br))
+            var(--_ctm-dn-sl-wt-sw-sd, var(--_tst-vo-se-sw-sd))
+            var(--_ctm-dn-sl-wt-sw-cr, var(--_tst-dn-sl-wt-sw-cr))
+        );
+      }
+    }
+    &[data-item-border="true"] {
+      .social__item {
+        border-color: var(--_ctm-dn-im-se-br-cr, var(--_tst-dn-im-se-br-cr));
+        border-style: var(--_ctm-dn-im-se-br-se, var(--_tst-dn-im-se-br-se));
+        border-width: var(--_ctm-dn-im-se-br-wh, var(--_tst-dn-im-se-br-wh));
+      }
+    }
+    &[data-item-shadow="true"] {
+      .social__item {
+        box-shadow: var(
+          --_show-shadow,
+          var(--_ctm-dn-im-se-sw-ae, var(--_tst-dn-im-se-sw-ae))
+            var(--_ctm-dn-im-se-sw-br, var(--_tst-vo-se-sw-br))
+            var(--_ctm-dn-im-se-sw-sd, var(--_tst-vo-se-sw-sd))
+            var(--_ctm-dn-im-se-sw-cr, var(--_tst-dn-im-se-sw-cr))
+        );
+      }
+    }
+    .social__container {
+      display: flex;
+      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      width: 100%;
+      height: 100%;
+      gap: var(--_ctm-lt-im-sg, var(--_tst-lt-im-sg));
+      background-color: var(--_ctm-dn-sl-wt-bd-cr, var(--_tst-dn-sl-wt-bd-cr));
+      border-radius: var(--_ctm-dn-sl-wt-br-rs, var(--_tst-dn-sl-wt-br-rs));
+      svg {
+        width: var(--_ctm-dn-im-se-in-se, var(--_tst-dn-im-se-in-se));
+        height: var(--_ctm-dn-im-se-in-se, var(--_tst-dn-im-se-in-se));
+
+        path {
+          stroke: var(--_ctm-dn-im-se-in-c1, var(--_tst-dn-im-se-in-c1));
+        }
+      }
+      .social__item {
+        width: 100%;
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+        gap: var(--_ctm-lt-gp, var(--_tst-lt-gp));
+        background-color: var(--_ctm-dn-im-se-bd-cr, var(--_tst-dn-im-se-bd-cr));
+        border-radius: var(--_ctm-dn-im-se-br-rs, var(--_tst-dn-im-se-br-rs));
+      }
+      .social__text {
+        color: var(--_ctm-dn-im-se-cr, var(--_tst-dn-im-se-cr));
+        font-family: var(--_ctm-dn-im-se-ft-fy, var(--_tst-dn-im-se-ft-fy)), sans-serif;
+        font-size: var(--_ctm-dn-im-se-ft-se, var(--_tst-dn-im-se-ft-se));
+        font-weight: var(--_ctm-dn-im-se-ft-wt, var(--_tst-dn-im-se-ft-wt));
+        font-style: var(--_ctm-dn-im-se-ft-se-ic, var(--_tst-dn-im-se-ft-se-ic));
+        text-align: var(--_ctm-dn-im-se-tt-an, var(--_tst-dn-im-se-tt-an));
+        letter-spacing: var(--_ctm-dn-im-se-lr-sg, var(--_tst-dn-im-se-lr-sg));
+        line-height: var(--_ctm-dn-im-se-le-ht, var(--_tst-dn-im-se-le-ht));
+        text-decoration: var(--_ctm-dn-im-se-lh, var(--_ctm-dn-im-se-ue), var(--_tst-dn-im-se-lh));
+      }
+    }
+  }
+}

package/dist/store-locations.scss

@@ -0,0 +1,180 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="storeLocations"] {
+    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+
+    & > .wrapper {
+      // width: 100%;
+      // height: 100%;
+    }
+
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+    &[data-icon-position="left"] {
+      --_sf-fd-bn: row;
+    }
+    &[data-icon-position="right"] {
+      --_sf-fd-bn: row-reverse;
+    }
+    &[data-icon-position="center"] {
+      --_sf-fd-bn: row;
+    }
+
+    &:hover {
+      --_sf-hr-bd-cr: var(--_ctm-dn-hr-se-bd-cr, var(--_tst-dn-hr-se-bd-cr));
+      --_sf-hr-br-cr: var(--_ctm-dn-hr-se-br-cr, var(--_tst-dn-hr-se-br-cr));
+      --_sf-hr-br-st: var(--_ctm-dn-hr-se-br-se, var(--_tst-dn-hr-se-br-se));
+      --_sf-hr-br-wt: var(--_ctm-dn-hr-se-br-wh, var(--_tst-dn-hr-se-br-wh));
+      --_sf-hr-br-br: var(--_ctm-dn-hr-se-br-rs, var(--_tst-dn-hr-se-br-rs));
+      --_sf-hr-bx-sw: var(--_ctm-dn-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
+        var(--_ctm-dn-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
+        var(--_ctm-dn-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
+        var(--_ctm-dn-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr));
+
+      --_sf-hr-fc: var(--_ctm-dn-hr-se-cr, var(--_tst-dn-hr-se-cr));
+      --_sf-hr-ff: var(--_ctm-dn-hr-se-ft-fy, var(--_tst-dn-hr-se-ft-fy));
+      --_sf-hr-fs: var(--_ctm-dn-hr-se-ft-se, var(--_tst-dn-hr-se-ft-se));
+      --_sf-hr-fw: var(--_ctm-dn-hr-se-ft-wt, var(--_tst-dn-hr-se-ft-wt));
+      --_sf-hr-ft: var(--_ctm-dn-hr-se-ft-se-ic, var(--_tst-dn-hr-se-ft-se-ic));
+      --_sf-hr-ta: var(--_ctm-dn-hr-se-tt-an, var(--_tst-dn-hr-se-tt-an));
+      --_sf-hr-ls: var(--_ctm-dn-hr-se-lr-sg, var(--_tst-dn-hr-se-lr-sg));
+      --_sf-hr-lh: var(--_ctm-dn-hr-se-le-ht, var(--_tst-dn-hr-se-le-ht));
+
+      --_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;
+      }
+      &[data-hover-show-icon="false"] {
+        --_hover-show-icon: none;
+      }
+    }
+    &[data-show-icon="false"] {
+      --_show-icon: none;
+    }
+    &[data-element-style="Icon"] {
+      &[data-icon-position="left"] {
+        --_sf-jc: start;
+      }
+      &[data-icon-position="right"] {
+        --_sf-jc: end;
+      }
+      &[data-icon-position="center"] {
+        --_sf-jc: center;
+      }
+    }
+
+    .btn__with__text {
+      background-color: var(--_sf-hr-bd-cr, var(--_ctm-dn-dt-se-bd-cr, var(--_tst-dn-dt-se-bd-cr)));
+      // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      padding: var(--_sf-element-vt-pd) var(--_sf-element-hr-pd);
+      display: flex;
+      flex-direction: var(--_sf-fd-bn);
+      align-items: 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-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(
+          --_sf-hr-bx-sw,
+          var(
+            --_show-shadow,
+            var(--_ctm-dn-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
+              var(--_ctm-dn-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
+              var(--_ctm-dn-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
+              var(--_ctm-dn-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
+          )
+        )
+      );
+      &[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)));
+      }
+      // &.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%;
+      //   }
+      // }
+
+      .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%;
+      }
+    }
+  }
+}