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

package/dist/add-existing-form.scss

@@ -4,18 +4,17 @@
 
 $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;
@@ -25,20 +24,17 @@ $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;
@@ -48,23 +44,19 @@ $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;
             }
@@ -73,4 +65,4 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
     }
   }
-}
+}

package/dist/add-order.scss

@@ -1,5 +1,4 @@
 @use "./functions.scss" as *;
-
 .add_order__wrapper {
   position: relative;
   display: inline-block;
@@ -7,7 +6,6 @@
   &[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
@@ -19,37 +17,34 @@
       --_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)));
@@ -58,65 +53,114 @@
     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))));
-    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))));
-
+    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))));
+    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.
@@ -132,83 +176,152 @@
       // 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-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-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)));
+      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))));
-      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))));
+      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));
 
@@ -226,7 +339,6 @@
       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)});
@@ -248,10 +360,9 @@
       // 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;
@@ -333,7 +444,6 @@
     cursor: pointer;
     border-radius: 4px;
     white-space: nowrap;
-
     &:not(:last-child) {
       margin-bottom: 2px;
     }
@@ -353,4 +463,4 @@
       align-items: center;
     }
   }
-}
+}