@sc-360-v2/storefront-cms-library 0.5.58 → 0.5.60

package/dist/add-existing-form.scss

@@ -4,17 +4,18 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
+
 [data-div-type="element"] {
   &[data-element-type="addExistingForm"] {
-    & > div {
+    &>div {
       &.wrapper {
         width: 100%;
         min-height: prepareMediaVariable(--_ctm-lt-ht);
       }
     }
 
-    .grid_container {
-    }
+    .grid_container {}
+
     .psw__contain {
       margin-bottom: 24px;
       margin-top: 8px;
@@ -24,17 +25,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         align-items: center;
         justify-content: space-between;
         gap: 10px;
+
         .step {
           // width: 20%;1
           height: 3px;
           border-radius: 4px;
           background-color: var(--_gray-300);
           flex-grow: 1;
+
           &.active {
             background-color: var(--_success-600);
           }
         }
       }
+
       .psw_content {
         background-color: var(--_gray-50);
         padding: 16px;
@@ -44,19 +48,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         overflow-y: auto;
         // margin-top: 20px;
         margin-top: 5px;
+
         .title {
           font-size: 14px;
           font-weight: 600;
           color: var(--_gray-700);
           margin-bottom: 16px;
         }
+
         ul {
           li {
             color: var(--_gray-700);
             font-size: 14px;
-            & > span {
+
+            &>span {
               display: inline-flex;
             }
+
             &:not(:last-child) {
               margin-bottom: 8px;
             }
@@ -65,4 +73,4 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
     }
   }
-}
+}

package/dist/add-order.scss

@@ -1,4 +1,5 @@
 @use "./functions.scss" as *;
+
 .add_order__wrapper {
   position: relative;
   display: inline-block;
@@ -6,6 +7,7 @@
   &[data-show-shadow="false"] {
     --_show-shadow: none;
   }
+
   // Icon Position. These used to target `.add_order_button`, which no longer exists —
   // the button is rendered by the shared ButtonComponent as `.btn__with__text`, so none
   // of these rules matched and the control did nothing. `.btn__with__text` resolves its
@@ -17,34 +19,37 @@
       --_sf-jc: row;
     }
   }
+
   &[data-icon-position="right"] {
     .btn__with__text {
       --_sf-jc: row-reverse;
     }
   }
+
   &[data-element-style="Icon"] {
     &[data-icon-position="left"] {
       .btn__with__text {
         justify-content: start;
       }
     }
+
     &[data-icon-position="right"] {
       .btn__with__text {
         justify-content: end;
       }
     }
+
     &[data-icon-position="center"] {
       .btn__with__text {
         justify-content: center;
       }
     }
   }
+
   .btn__with__text {
     // background: transparent;
-    background: var(
-      --_ctm-mob-dn-dt-se-bd-cr,
-      var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr))
-    );
+    background: var(--_ctm-mob-dn-dt-se-bd-cr,
+        var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr)));
     border: none;
     width: var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)));
     height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
@@ -53,98 +58,65 @@
     align-items: center;
     flex-direction: var(--_sf-jc);
     justify-content: var(--_ctm-lt-tt-an, center);
-    font-size: var(
-      --_ctm-mob-dn-dt-se-ft-se,
-      var(--_ctm-tab-dn-dt-se-ft-se, var(--_ctm-dn-dt-se-ft-se))
-    );
+    font-size: var(--_ctm-mob-dn-dt-se-ft-se,
+        var(--_ctm-tab-dn-dt-se-ft-se, var(--_ctm-dn-dt-se-ft-se)));
     color: var(--_ctm-mob-dn-dt-se-cr, var(--_ctm-tab-dn-dt-se-cr, var(--_ctm-dn-dt-se-cr)));
-    background-color: var(
-      --_ctm-mob-dn-dt-se-bd-cr,
-      var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr))
-    );
-    font-family: var(
-      --_sf-hr-ff,
-      var(--_ctm-mob-dn-dt-se-ft-fy, var(--_ctm-tab-dn-dt-se-ft-fy, var(--_ctm-dn-dt-se-ft-fy)))
-    );
-
-    font-weight: var(
-      --_ctm-mob-dn-dt-se-ft-wt,
-      var(--_ctm-tab-dn-dt-se-ft-wt, var(--_ctm-dn-dt-se-ft-wt))
-    );
-    font-style: var(
-      --_ctm-mob-dn-dt-se-ft-se-ic,
-      var(--_ctm-tab-dn-dt-se-ft-se-ic, var(--_ctm-dn-dt-se-ft-se-ic))
-    );
-    text-align: var(
-      --_ctm-mob-dn-dt-se-tt-an,
-      var(--_ctm-tab-dn-dt-se-tt-an, var(--_ctm-dn-dt-se-tt-an))
-    );
-    letter-spacing: var(
-      --_ctm-mob-dn-dt-se-lr-sg,
-      var(--_ctm-tab-dn-dt-se-lr-sg, var(--_ctm-dn-dt-se-lr-sg))
-    );
-    line-height: var(
-      --_ctm-mob-dn-dt-se-le-ht,
-      var(--_ctm-tab-dn-dt-se-le-ht, var(--_ctm-dn-dt-se-le-ht))
-    );
-    text-decoration: var(
-      --_ctm-mob-dn-dt-se-ue,
-      var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue))
-    );
-    border-color: var(
-      --_ctm-mob-dn-dt-se-br-cr,
-      var(--_ctm-tab-dn-dt-se-br-cr, var(--_ctm-dn-dt-se-br-cr))
-    );
-    border-style: var(
-      --_ctm-mob-dn-dt-se-br-se,
-      var(--_ctm-tab-dn-dt-se-br-se, var(--_ctm-dn-dt-se-br-se))
-    );
-    border-width: var(
-      --_ctm-mob-dn-dt-se-br-wh,
-      var(--_ctm-tab-dn-dt-se-br-wh, var(--_ctm-dn-dt-se-br-wh))
-    );
-    border-radius: var(
-      --_ctm-mob-dn-dt-se-br-rs,
-      var(--_ctm-tab-dn-dt-se-br-rs, var(--_ctm-dn-dt-se-br-rs))
-    );
-    box-shadow: var(
-      --_show-text-content-shadow,
-      var(
-          --_ctm-mob-dn-dt-se-sw-ae,
-          var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae, none))
-        )
-        var(
-          --_ctm-mob-dn-dt-se-sw-br,
-          var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br, none))
-        )
-        var(
-          --_ctm-mob-dn-dt-se-sw-sd,
-          var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd, none))
-        )
-        var(
-          --_ctm-mob-dn-dt-se-sw-cr,
-          var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr, none))
-        )
-    );
+    background-color: var(--_ctm-mob-dn-dt-se-bd-cr,
+        var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr)));
+    font-family: var(--_sf-hr-ff,
+        var(--_ctm-mob-dn-dt-se-ft-fy, var(--_ctm-tab-dn-dt-se-ft-fy, var(--_ctm-dn-dt-se-ft-fy))));
+    text-transform: var(--_sf-hr-tt-tm,
+        var(--_ctm-mob-dn-dt-se-tt-tm, var(--_ctm-tab-dn-dt-se-tt-tm, var(--_ctm-dn-dt-se-tt-tm))));
+    word-wrap: var(--_sf-hr-wd-wp,
+        var(--_ctm-mob-dn-dt-se-wd-wp, var(--_ctm-tab-dn-dt-se-wd-wp, var(--_ctm-dn-dt-se-wd-wp))));
+    word-break: var(--_sf-hr-wd-bk,
+        var(--_ctm-mob-dn-dt-se-wd-bk, var(--_ctm-tab-dn-dt-se-wd-bk, var(--_ctm-dn-dt-se-wd-bk))));
+
+    &.flex__overflow {
+      white-space: normal;
+      @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+    }
+
+    font-weight: var(--_ctm-mob-dn-dt-se-ft-wt,
+      var(--_ctm-tab-dn-dt-se-ft-wt, var(--_ctm-dn-dt-se-ft-wt)));
+    font-style: var(--_ctm-mob-dn-dt-se-ft-se-ic,
+      var(--_ctm-tab-dn-dt-se-ft-se-ic, var(--_ctm-dn-dt-se-ft-se-ic)));
+    text-align: var(--_ctm-mob-dn-dt-se-tt-an,
+      var(--_ctm-tab-dn-dt-se-tt-an, var(--_ctm-dn-dt-se-tt-an)));
+    letter-spacing: var(--_ctm-mob-dn-dt-se-lr-sg,
+      var(--_ctm-tab-dn-dt-se-lr-sg, var(--_ctm-dn-dt-se-lr-sg)));
+    line-height: var(--_ctm-mob-dn-dt-se-le-ht,
+      var(--_ctm-tab-dn-dt-se-le-ht, var(--_ctm-dn-dt-se-le-ht)));
+    text-decoration: var(--_ctm-mob-dn-dt-se-ue,
+      var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue)));
+    border-color: var(--_ctm-mob-dn-dt-se-br-cr,
+      var(--_ctm-tab-dn-dt-se-br-cr, var(--_ctm-dn-dt-se-br-cr)));
+    border-style: var(--_ctm-mob-dn-dt-se-br-se,
+      var(--_ctm-tab-dn-dt-se-br-se, var(--_ctm-dn-dt-se-br-se)));
+    border-width: var(--_ctm-mob-dn-dt-se-br-wh,
+      var(--_ctm-tab-dn-dt-se-br-wh, var(--_ctm-dn-dt-se-br-wh)));
+    border-radius: var(--_ctm-mob-dn-dt-se-br-rs,
+      var(--_ctm-tab-dn-dt-se-br-rs, var(--_ctm-dn-dt-se-br-rs)));
+    box-shadow: var(--_show-text-content-shadow,
+      var(--_ctm-mob-dn-dt-se-sw-ae,
+        var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae, none))) var(--_ctm-mob-dn-dt-se-sw-br,
+        var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br, none))) var(--_ctm-mob-dn-dt-se-sw-sd,
+        var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd, none))) var(--_ctm-mob-dn-dt-se-sw-cr,
+        var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr, none))));
 
     cursor: pointer;
     // padding: 6px 12px;
     padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
 
     svg {
-      width: var(
-        --_ctm-mob-dn-dt-se-in-se,
-        var(--_ctm-tab-dn-dt-se-in-se, var(--_ctm-dn-dt-se-in-se))
-      );
-      height: var(
-        --_ctm-mob-dn-dt-se-in-se,
-        var(--_ctm-tab-dn-dt-se-in-se, var(--_ctm-dn-dt-se-in-se))
-      );
+      width: var(--_ctm-mob-dn-dt-se-in-se,
+          var(--_ctm-tab-dn-dt-se-in-se, var(--_ctm-dn-dt-se-in-se)));
+      height: var(--_ctm-mob-dn-dt-se-in-se,
+          var(--_ctm-tab-dn-dt-se-in-se, var(--_ctm-dn-dt-se-in-se)));
+
       path {
-        stroke: var(
-          --_ctm-mob-dn-dt-se-in-c1,
-          var(--_ctm-tab-dn-dt-se-in-c1, var(--_ctm-dn-dt-se-in-c1))
-        );
+        stroke: var(--_ctm-mob-dn-dt-se-in-c1,
+            var(--_ctm-tab-dn-dt-se-in-c1, var(--_ctm-dn-dt-se-in-c1)));
         // Overrides the stroke-width presentation attribute baked into the icon markup.
         // Stroke width is authored on the default state only — the :hover block leaves
         // it alone, so this declaration keeps applying while hovered.
@@ -159,135 +131,84 @@
       // default-state values, which is why the Hover state's text properties appeared
       // dead. Publishing the hover values as those custom properties is what `.txt`
       // is written to consume, and matches how product-actions.scss does it.
-      --_sf-hr-cr: var(
-        --_ctm-mob-dn-hr-se-cr,
-        var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr))
-      );
-      --_sf-hr-ft-fy: var(
-        --_ctm-mob-dn-hr-se-ft-fy,
-        var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
-      );
-      --_sf-hr-ft-se: var(
-        --_ctm-mob-dn-hr-se-ft-se,
-        var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
-      );
-      --_sf-hr-ft-wt: var(
-        --_ctm-mob-dn-hr-se-ft-wt,
-        var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
-      );
-      --_sf-hr-ft-se-ic: var(
-        --_ctm-mob-dn-hr-se-ft-se-ic,
-        var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
-      );
-      --_sf-hr-tt-an: var(
-        --_ctm-mob-dn-hr-se-tt-an,
-        var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
-      );
-      --_sf-hr-lr-sg: var(
-        --_ctm-mob-dn-hr-se-lr-sg,
-        var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
-      );
-      --_sf-hr-le-ht: var(
-        --_ctm-mob-dn-hr-se-le-ht,
-        var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
-      );
-      --_sf-hr-ue: var(
-        --_ctm-mob-dn-hr-se-ue,
-        var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
-      );
-
-      background-color: var(
-        --_ctm-mob-dn-hr-se-bd-cr,
-        var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
-      );
+      --_sf-hr-cr: var(--_ctm-mob-dn-hr-se-cr, var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr)));
+      --_sf-hr-ft-fy: var(--_ctm-mob-dn-hr-se-ft-fy,
+          var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy)));
+      --_sf-hr-tt-tm: var(--_ctm-mob-dn-hr-se-tt-tm,
+          var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm)));
+      --_sf-hr-wd-wp: var(--_ctm-mob-dn-hr-se-wd-wp,
+          var(--_ctm-tab-dn-hr-se-wd-wp, var(--_ctm-dn-hr-se-wd-wp)));
+      --_sf-hr-wd-bk: var(--_ctm-mob-dn-hr-se-wd-bk,
+          var(--_ctm-tab-dn-hr-se-wd-bk, var(--_ctm-dn-hr-se-wd-bk)));
+      --_sf-hr-ft-se: var(--_ctm-mob-dn-hr-se-ft-se,
+          var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se)));
+      --_sf-hr-ft-wt: var(--_ctm-mob-dn-hr-se-ft-wt,
+          var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt)));
+      --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-hr-se-ft-se-ic,
+          var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic)));
+      --_sf-hr-tt-an: var(--_ctm-mob-dn-hr-se-tt-an,
+          var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an)));
+      --_sf-hr-lr-sg: var(--_ctm-mob-dn-hr-se-lr-sg,
+          var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg)));
+      --_sf-hr-le-ht: var(--_ctm-mob-dn-hr-se-le-ht,
+          var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht)));
+      --_sf-hr-ue: var(--_ctm-mob-dn-hr-se-ue, var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue)));
+
+      background-color: var(--_ctm-mob-dn-hr-se-bd-cr,
+          var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr)));
       // @include BgColorLighter(var(--_thm-sy-bs-dt-se-bd-cr), 10%);
-      font-size: var(
-        --_ctm-mob-dn-hr-se-ft-se,
-        var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
-      );
+      font-size: var(--_ctm-mob-dn-hr-se-ft-se,
+          var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se)));
       color: var(--_ctm-mob-dn-hr-se-cr, var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr)));
-      font-family: var(
-        --_sf-hr-ff,
-        var(--_ctm-mob-dn-hr-se-ft-fy, var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy)))
-      );
-      font-weight: var(
-        --_ctm-mob-dn-hr-se-ft-wt,
-        var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
-      );
-      font-style: var(
-        --_ctm-mob-dn-hr-se-ft-se-ic,
-        var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
-      );
-      text-align: var(
-        --_ctm-mob-dn-hr-se-tt-an,
-        var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
-      );
-      letter-spacing: var(
-        --_ctm-mob-dn-hr-se-lr-sg,
-        var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
-      );
-      line-height: var(
-        --_ctm-mob-dn-hr-se-le-ht,
-        var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
-      );
-      text-decoration: var(
-        --_ctm-mob-dn-hr-se-ue,
-        var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
-      );
-      border-color: var(
-        --_ctm-mob-dn-hr-se-br-cr,
-        var(--_ctm-tab-dn-hr-se-br-cr, var(--_ctm-dn-hr-se-br-cr))
-      );
-      border-style: var(
-        --_ctm-mob-dn-hr-se-br-se,
-        var(--_ctm-tab-dn-hr-se-br-se, var(--_ctm-dn-hr-se-br-se))
-      );
-      border-width: var(
-        --_ctm-mob-dn-hr-se-br-wh,
-        var(--_ctm-tab-dn-hr-se-br-wh, var(--_ctm-dn-hr-se-br-wh))
-      );
-      border-radius: var(
-        --_ctm-mob-dn-hr-se-br-rs,
-        var(--_ctm-tab-dn-hr-se-br-rs, var(--_ctm-dn-hr-se-br-rs))
-      );
-      box-shadow: var(
-        --_show-text-content-shadow,
-        var(
-            --_ctm-mob-dn-hr-se-sw-ae,
-            var(--_ctm-tab-dn-hr-se-sw-ae, var(--_ctm-dn-hr-se-sw-ae, none))
-          )
-          var(
-            --_ctm-mob-dn-hr-se-sw-br,
-            var(--_ctm-tab-dn-hr-se-sw-br, var(--_ctm-dn-hr-se-sw-br, none))
-          )
-          var(
-            --_ctm-mob-dn-hr-se-sw-sd,
-            var(--_ctm-tab-dn-hr-se-sw-sd, var(--_ctm-dn-hr-se-sw-sd, none))
-          )
-          var(
-            --_ctm-mob-dn-hr-se-sw-cr,
-            var(--_ctm-tab-dn-hr-se-sw-cr, var(--_ctm-dn-hr-se-sw-cr, none))
-          )
-      );
+      font-family: var(--_sf-hr-ff,
+          var(--_ctm-mob-dn-hr-se-ft-fy, var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))));
+      text-transform: var(--_sf-hr-tt-tm,
+          var(--_ctm-mob-dn-hr-se-tt-tm, var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm))));
+      word-wrap: var(--_sf-hr-wd-wp,
+          var(--_ctm-mob-dn-hr-se-wd-wp, var(--_ctm-tab-dn-hr-se-wd-wp, var(--_ctm-dn-hr-se-wd-wp))));
+      word-break: var(--_sf-hr-wd-bk,
+          var(--_ctm-mob-dn-hr-se-wd-bk, var(--_ctm-tab-dn-hr-se-wd-bk, var(--_ctm-dn-hr-se-wd-bk))));
+      font-weight: var(--_ctm-mob-dn-hr-se-ft-wt,
+          var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt)));
+      font-style: var(--_ctm-mob-dn-hr-se-ft-se-ic,
+          var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic)));
+      text-align: var(--_ctm-mob-dn-hr-se-tt-an,
+          var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an)));
+      letter-spacing: var(--_ctm-mob-dn-hr-se-lr-sg,
+          var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg)));
+      line-height: var(--_ctm-mob-dn-hr-se-le-ht,
+          var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht)));
+      text-decoration: var(--_ctm-mob-dn-hr-se-ue,
+          var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue)));
+      border-color: var(--_ctm-mob-dn-hr-se-br-cr,
+          var(--_ctm-tab-dn-hr-se-br-cr, var(--_ctm-dn-hr-se-br-cr)));
+      border-style: var(--_ctm-mob-dn-hr-se-br-se,
+          var(--_ctm-tab-dn-hr-se-br-se, var(--_ctm-dn-hr-se-br-se)));
+      border-width: var(--_ctm-mob-dn-hr-se-br-wh,
+          var(--_ctm-tab-dn-hr-se-br-wh, var(--_ctm-dn-hr-se-br-wh)));
+      border-radius: var(--_ctm-mob-dn-hr-se-br-rs,
+          var(--_ctm-tab-dn-hr-se-br-rs, var(--_ctm-dn-hr-se-br-rs)));
+      box-shadow: var(--_show-text-content-shadow,
+          var(--_ctm-mob-dn-hr-se-sw-ae,
+            var(--_ctm-tab-dn-hr-se-sw-ae, var(--_ctm-dn-hr-se-sw-ae, none))) var(--_ctm-mob-dn-hr-se-sw-br,
+            var(--_ctm-tab-dn-hr-se-sw-br, var(--_ctm-dn-hr-se-sw-br, none))) var(--_ctm-mob-dn-hr-se-sw-sd,
+            var(--_ctm-tab-dn-hr-se-sw-sd, var(--_ctm-dn-hr-se-sw-sd, none))) var(--_ctm-mob-dn-hr-se-sw-cr,
+            var(--_ctm-tab-dn-hr-se-sw-cr, var(--_ctm-dn-hr-se-sw-cr, none))));
 
       svg {
         // background-color: red;
-        width: var(
-          --_ctm-mob-dn-hr-se-in-se,
-          var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
-        );
-        height: var(
-          --_ctm-mob-dn-hr-se-in-se,
-          var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
-        );
+        width: var(--_ctm-mob-dn-hr-se-in-se,
+            var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se)));
+        height: var(--_ctm-mob-dn-hr-se-in-se,
+            var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se)));
+
         path {
-          stroke: var(
-            --_ctm-mob-dn-hr-se-in-c1,
-            var(--_ctm-tab-dn-hr-se-in-c1, var(--_ctm-dn-hr-se-in-c1))
-          );
+          stroke: var(--_ctm-mob-dn-hr-se-in-c1,
+              var(--_ctm-tab-dn-hr-se-in-c1, var(--_ctm-dn-hr-se-in-c1)));
         }
       }
     }
+
     // &[data-show-border="true"] {
     //   border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dt-se-br-cr));
 
@@ -302,6 +223,14 @@
       color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dt-se-cr));
 
       font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dt-se-ft-fy));
+      text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-dt-se-tt-tm));
+      word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dt-se-wd-wp));
+      word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dt-se-wd-bk));
+
+      &.flex__overflow {
+        white-space: normal;
+        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+      }
 
       font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dt-se-ft-se));
 
@@ -319,9 +248,10 @@
       // text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
     }
 
-    & > span {
+    &>span {
       display: flex;
     }
+
     .icon--hover {
       // position: absolute;
       // inset: 0;
@@ -403,6 +333,7 @@
     cursor: pointer;
     border-radius: 4px;
     white-space: nowrap;
+
     &:not(:last-child) {
       margin-bottom: 2px;
     }
@@ -422,4 +353,4 @@
       align-items: center;
     }
   }
-}
+}