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

package/dist/embroider-template-1-v2.scss

@@ -55,6 +55,7 @@ $defaultValues: (
       from {
         transform: translate(-50%, -50%) rotate(0deg);
       }
+
       to {
         transform: translate(-50%, -50%) rotate(360deg);
       }
@@ -63,7 +64,7 @@ $defaultValues: (
 }
 
 @mixin EmbroideryTemplate1StylesV2() {
-  & > #{$tmpWrapper} {
+  &>#{$tmpWrapper} {
     @include prepareMediaQueries($defaultValues);
     --_sf-prm-clr: #000;
     --_sf-scd-clr: #fff;
@@ -79,7 +80,7 @@ $defaultValues: (
       gap: 12px;
       padding: 8px 12px;
 
-      & > #{$positionHeader} {
+      &>#{$positionHeader} {
         display: var(--_d-flex);
         cursor: pointer;
         align-items: center;
@@ -93,6 +94,7 @@ $defaultValues: (
         background: var(--_sp-act-clr, transparent);
         color: var(--_sp-act-cl, var(--_sf-prm-clr));
         border-radius: 4px;
+
         span {
           display: var(--_d-flex);
           align-items: center;
@@ -106,7 +108,7 @@ $defaultValues: (
       }
     }
 
-    & > #{$paListParent} {
+    &>#{$paListParent} {
       display: var(--_d-flex);
       flex-direction: column;
       row-gap: 16px;
@@ -119,7 +121,7 @@ $defaultValues: (
         overflow-y: auto;
       }
 
-      & > #{$pacListParent} {
+      &>#{$pacListParent} {
         display: var(--_d-flex);
         flex-direction: var(--_sf-plp-flx-drt);
         gap: var(---_sff-glyph-asfsdafdn, var(--_sf-prv-prt-gap));
@@ -131,7 +133,7 @@ $defaultValues: (
         }
 
         // Header
-        & > #{$positionHeader} {
+        &>#{$positionHeader} {
           display: var(--_d-flex);
           align-items: center;
           justify-content: space-between;
@@ -141,17 +143,14 @@ $defaultValues: (
             border-radius: 4px;
             --_perc-clr-bb: 85%;
             padding: 8px 12px;
-            border: 0.5px solid
-              color-mix(
-                in srgb,
-                var(--_sp-color-sadasd, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)})
-                  calc(100% - var(--_perc-clr-bb)),
-                transparent var(--_perc-clr-bb)
-              );
+            border: 0.5px solid color-mix(in srgb,
+              var(--_sp-color-sadasd, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)}) calc(100% - var(--_perc-clr-bb)),
+              transparent var(--_perc-clr-bb));
           }
 
-          & > span {
+          &>span {
             display: var(--_d-flex);
+
             &.tt1 {
               color: prepareMediaVariable(--_ctm-dn-te-cr, #101828);
               font-size: prepareMediaVariable(--_ctm-dn-te-ft-se, 30px);
@@ -159,6 +158,9 @@ $defaultValues: (
               line-height: prepareMediaVariable(--_ctm-dn-te-le-ht, 125%);
               font-style: prepareMediaVariable(--_ctm-dn-te-ft-se-ic, normal);
               font-family: prepareMediaVariable(--_ctm-dn-te-ft-fy);
+              text-transform: prepareMediaVariable(--_ctm-dn-te-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-te-wd-wp);
+              word-break: prepareMediaVariable(--_ctm-dn-te-wd-bk);
               text-decoration: prepareMediaVariable(--_ctm-dn-te-ue);
               letter-spacing: prepareMediaVariable(--_ctm-dn-te-lr-sg);
               text-align: prepareMediaVariable(--_ctm-dn-te-tt-an);
@@ -177,7 +179,7 @@ $defaultValues: (
                 transform: rotate(180deg);
               }
 
-              & > svg {
+              &>svg {
                 --_perc: 0.75;
                 width: calc(var(--_sf-size) * var(--_perc));
                 height: calc(var(--_sf-size) * var(--_perc));
@@ -209,7 +211,7 @@ $defaultValues: (
           color: #666666;
         }
 
-        & > .emb__rght__v2 {
+        &>.emb__rght__v2 {
           display: var(--_d-flex);
           flex-direction: column;
           row-gap: 16px;
@@ -218,7 +220,7 @@ $defaultValues: (
 
         // Preview
 
-        & > #{$previewMain} {
+        &>#{$previewMain} {
           width: 100%;
           display: var(--_d-flex);
           align-items: flex-start;
@@ -231,16 +233,15 @@ $defaultValues: (
           //   transparent var(--_perc-1, 0%)
           // );
           --_alpha: 85%;
-          background: color-mix(
-            in srgb,
-            var(--_sf-prm-clr) calc(100% - var(--_alpha)),
-            transparent var(--_alpha)
-          );
+          background: color-mix(in srgb,
+              var(--_sf-prm-clr) calc(100% - var(--_alpha)),
+              transparent var(--_alpha));
 
           &:is(#{$v1Child}) {
             background: #f5f5f5;
             --_max--sakjdsfnjk: 100%;
           }
+
           padding: 8px;
           border-radius: 6px;
 
@@ -253,14 +254,12 @@ $defaultValues: (
             align-self: flex-start;
           }
 
-          & > .emb__preview__title {
+          &>.emb__preview__title {
             // color: color-mix(in srgb, #fff 70%, transparent 30%);
             --_alpha: 15%;
-            color: color-mix(
-              in srgb,
-              var(--_sf-prm-clr) calc(100% - var(--_alpha)),
-              transparent var(--_alpha)
-            );
+            color: color-mix(in srgb,
+                var(--_sf-prm-clr) calc(100% - var(--_alpha)),
+                transparent var(--_alpha));
             font-size: 14px;
             font-weight: 600;
 
@@ -274,13 +273,13 @@ $defaultValues: (
             }
           }
 
-          & > .emb__prv__svg__div__v2 {
+          &>.emb__prv__svg__div__v2 {
             display: var(--_d-flex);
             width: 100%;
             justify-content: center;
           }
 
-          & > #{$previewMainWrapper} {
+          &>#{$previewMainWrapper} {
             display: var(--_d-flex);
             // flex-direction: column;
             max-width: min(500px, 100%);
@@ -289,15 +288,13 @@ $defaultValues: (
             justify-content: center;
             position: var(--_p-relative);
             --_blk-perc: 5%;
-            background: color-mix(
-              in srgb,
+            background: color-mix(in srgb,
               var(--_base-white) calc(100% - #{var(--_blk-perc)}),
-              var(--_base-black) var(--_blk-perc)
-            );
+              var(--_base-black) var(--_blk-perc));
             border-radius: 6px;
             min-height: var(--_sf-emb-prw-mn-ht-vl, 150px);
 
-            & > #{$previewMainOuput} {
+            &>#{$previewMainOuput} {
               display: var(--_d-grid);
               width: 100%;
               align-self: stretch;
@@ -328,12 +325,12 @@ $defaultValues: (
             overflow-x: auto;
             scrollbar-width: none;
 
-            & > button {
+            &>button {
               flex: 0 0 max-content;
             }
           }
 
-          & > button {
+          &>button {
             min-height: 40px;
             display: var(--_d-flex);
             align-items: center;
@@ -351,17 +348,13 @@ $defaultValues: (
             //       transparent var(--_perc-clr-bb)
             //     )
             //   );
-            border: 0.5px solid
-              color-mix(
-                in srgb,
-                var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)})
-                  calc(100% - var(--_perc-clr-bb)),
-                transparent var(--_perc-clr-bb)
-              );
+            border: 0.5px solid color-mix(in srgb,
+              var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)}) calc(100% - var(--_perc-clr-bb)),
+              transparent var(--_perc-clr-bb));
             background: color-mix(in srgb, var(--_sp-color, transparent) 6%, transparent 94%);
             gap: 6px;
 
-            & > .icn__spn {
+            &>.icn__spn {
               display: var(--_d-flex);
               align-items: center;
               justify-content: center;
@@ -372,33 +365,34 @@ $defaultValues: (
 
                 path {
                   &:not(.acv *) {
-                    stroke: color-mix(
-                      in srgb,
-                      var(
-                          --_sp-color,
-                          var(
-                            --_ctm-mob-dn-dt-tt-cr,
-                            var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
-                          )
-                        )
-                        75%,
-                      transparent 25%
-                    );
+                    stroke: color-mix(in srgb,
+                        var(--_sp-color,
+                          var(--_ctm-mob-dn-dt-tt-cr,
+                            var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467)))) 75%,
+                        transparent 25%);
                   }
                 }
               }
             }
 
-            & > .pac__name__div {
+            &>.pac__name__div {
               display: var(--_d-flex);
               align-items: center;
               gap: 8px;
 
-              & > .pac__name__span {
+              &>.pac__name__span {
                 display: var(--_d-flex);
                 color: var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)});
                 font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
                 font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
+                word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
+                word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
+
+                &.flex__overflow {
+                  white-space: normal;
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
+
                 font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
                 font-weight: var(--_fw-wt, prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400));
                 line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
@@ -415,13 +409,9 @@ $defaultValues: (
 
               svg {
                 rect {
-                  fill: var(
-                    --_sp-color,
-                    var(
-                      --_ctm-mob-dn-dt-tt-cr,
-                      var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
-                    )
-                  );
+                  fill: var(--_sp-color,
+                      var(--_ctm-mob-dn-dt-tt-cr,
+                        var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))));
                 }
               }
             }
@@ -459,7 +449,7 @@ $defaultValues: (
             align-items: center;
             gap: 8px;
 
-            & > span {
+            &>span {
               display: var(--_d-flex);
               cursor: pointer;
             }
@@ -468,6 +458,9 @@ $defaultValues: (
           label {
             color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
             font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-dt-tt-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
             font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
             font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
             font-weight: 500;
@@ -475,11 +468,9 @@ $defaultValues: (
           }
 
           // Image Upload
-          & > .img__div {
-            --_sp-iu-clr: var(
-              --_ctm-mob-dn-ae-tt-cr,
-              var(--_ctm-tab-dn-ae-tt-cr, var(--_ctm-dn-ae-tt-cr, #243dc6))
-            );
+          &>.img__div {
+            --_sp-iu-clr: var(--_ctm-mob-dn-ae-tt-cr,
+                var(--_ctm-tab-dn-ae-tt-cr, var(--_ctm-dn-ae-tt-cr, #243dc6)));
             background: color-mix(in srgb, var(--_sp-iu-clr, transparent) 6%, transparent 94%);
             height: 75px;
             width: min(#{$maxWidth}, 100%);
@@ -498,19 +489,11 @@ $defaultValues: (
             //       transparent var(--_perc-clr-bb)
             //     )
             //   );
-            border: 0.5px dashed
-              color-mix(
-                in srgb,
-                var(
-                  --_sp-iu-clr,
-                  var(
-                      --_ctm-mob-dn-dt-tt-cr,
-                      var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
-                    )
-                    calc(100% - var(--_perc-clr-bb))
-                ),
-                transparent var(--_perc-clr-bb)
-              );
+            border: 0.5px dashed color-mix(in srgb,
+                var(--_sp-iu-clr,
+                  var(--_ctm-mob-dn-dt-tt-cr,
+                    var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))) calc(100% - var(--_perc-clr-bb))),
+                transparent var(--_perc-clr-bb));
             position: var(--_p-relative);
             cursor: pointer;
 
@@ -518,7 +501,7 @@ $defaultValues: (
               --_sf-vt-im: hidden;
               --_sf-vt-op: 0;
 
-              & > .output__div {
+              &>.output__div {
                 display: var(--_d-flex);
                 align-self: stretch;
                 justify-self: stretch;
@@ -532,7 +515,7 @@ $defaultValues: (
               }
             }
 
-            & > span {
+            &>span {
               &.label__span {
                 position: var(--_p-absolute);
                 pointer-events: none;
@@ -547,8 +530,9 @@ $defaultValues: (
                 align-items: center;
                 gap: 4px;
 
-                & > span {
+                &>span {
                   display: var(--_d-flex);
+
                   svg {
                     width: 18px;
                     height: 18px;
@@ -557,9 +541,12 @@ $defaultValues: (
                       stroke: var(--_sp-iu-clr);
                     }
                   }
+
                   &:nth-of-type(2) {
                     font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 12px);
                     font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
+                    word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
+                    word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
                     text-transform: uppercase;
                     line-height: 1;
                     color: var(--_sp-iu-clr);
@@ -568,7 +555,7 @@ $defaultValues: (
               }
             }
 
-            & > input {
+            &>input {
               &[type="file"] {
                 position: var(--_p-absolute);
                 inset: 0 0 0 0;
@@ -580,7 +567,7 @@ $defaultValues: (
           }
 
           // Text Editor
-          & > .text__div {
+          &>.text__div {
             --_perc-clr-bb: 85%;
             border-radius: 4px;
             // border: 0.5px solid
@@ -594,13 +581,9 @@ $defaultValues: (
             //     )
             //   );
 
-            border: 0.5px solid
-              color-mix(
-                in srgb,
-                #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)}
-                  calc(100% - var(--_perc-clr-bb)),
-                transparent var(--_perc-clr-bb)
-              );
+            border: 0.5px solid color-mix(in srgb,
+              #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)} calc(100% - var(--_perc-clr-bb)),
+              transparent var(--_perc-clr-bb));
             background: var(--_sf-scd-clr);
             padding: 8px 12px;
 
@@ -612,10 +595,13 @@ $defaultValues: (
               --_fcs-clr: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
             }
 
-            & > input {
+            &>input {
               color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
               font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
               font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
+              text-transform: prepareMediaVariable(--_ctm-dn-dt-tt-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
+              word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
               font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
               font-weight: var(--_fw-wt, prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400));
               line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
@@ -628,12 +614,13 @@ $defaultValues: (
               }
             }
           }
-          & > .color__div {
+
+          &>.color__div {
             display: var(--_d-flex);
             flex-wrap: wrap;
             gap: 12px;
 
-            & > div {
+            &>div {
               &.color__box {
                 display: var(--_d-flex);
                 width: 24px;
@@ -652,7 +639,7 @@ $defaultValues: (
             }
           }
 
-          & > .config__div__v2 {
+          &>.config__div__v2 {
             display: var(--_d-flex);
             flex-direction: column;
             row-gap: 6px;
@@ -660,24 +647,32 @@ $defaultValues: (
             &:is(.clr__pkr__v2 + *) {
               flex: 0 0 100%;
             }
-            & > .err__msg__v2 {
+
+            &>.err__msg__v2 {
               color: #d32f2f;
               font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
+              text-transform: prepareMediaVariable(--_ctm-dn-dt-tt-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
+              word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
               font-size: 14px;
               line-height: 1.5;
             }
+
             ul {
               display: flex;
               flex-direction: column;
               row-gap: 6px;
               margin-inline-start: 16px;
 
-              & > li {
+              &>li {
                 list-style-type: disc;
 
                 font-size: 12px;
                 color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
                 font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
+                text-transform: prepareMediaVariable(--_ctm-dn-dt-tt-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
+                word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
                 font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
                 line-height: 1.4;
               }
@@ -685,13 +680,13 @@ $defaultValues: (
           }
 
           // Common Dropdown
-          & > .cmn__drp__parent__v2 {
-            & > ul {
+          &>.cmn__drp__parent__v2 {
+            &>ul {
               display: var(--_d-flex);
               flex-wrap: wrap;
               gap: 12px;
 
-              & > li {
+              &>li {
                 display: var(--_d-flex);
                 align-content: center;
                 gap: 6px;
@@ -709,13 +704,9 @@ $defaultValues: (
                 //     )
                 //   );
 
-                border: 0.5px solid
-                  color-mix(
-                    in srgb,
-                    var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)})
-                      calc(100% - var(--_perc-clr-bb)),
-                    transparent var(--_perc-clr-bb)
-                  );
+                border: 0.5px solid color-mix(in srgb,
+                  var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)}) calc(100% - var(--_perc-clr-bb)),
+                  transparent var(--_perc-clr-bb));
                 background: color-mix(in srgb, var(--_sp-color, transparent) 6%, transparent 94%);
                 cursor: pointer;
 
@@ -727,7 +718,7 @@ $defaultValues: (
                   height: var(--_size-h);
                   position: var(--_p-relative);
 
-                  & > .list__icon {
+                  &>.list__icon {
                     position: var(--_p-absolute);
                     left: 2px;
                     top: 2px;
@@ -740,6 +731,7 @@ $defaultValues: (
                     --_sf-at-op: 1;
                   }
                 }
+
                 &,
                 * {
                   user-select: none;
@@ -750,12 +742,15 @@ $defaultValues: (
                   --_fw-wt: #{prepareMediaVariable(--_ctm-dn-ae-tt-ft-wt, 600)};
                 }
 
-                & > span {
+                &>span {
                   display: var(--_d-flex);
+
                   &.list__text {
                     color: var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)});
                     font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
                     font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
+                    word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
+                    word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
                     font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
                     font-weight: var(--_fw-wt, prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400));
                     line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
@@ -774,29 +769,19 @@ $defaultValues: (
 
                       path {
                         &:not(.active *) {
-                          stroke: color-mix(
-                            in srgb,
-                            var(
-                                --_sp-color,
-                                var(
-                                  --_ctm-mob-dn-dt-tt-cr,
-                                  var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
-                                )
-                              )
-                              75%,
-                            transparent 25%
-                          );
+                          stroke: color-mix(in srgb,
+                              var(--_sp-color,
+                                var(--_ctm-mob-dn-dt-tt-cr,
+                                  var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467)))) 75%,
+                              transparent 25%);
                         }
                       }
+
                       &:is(.active *) {
                         rect {
-                          fill: var(
-                            --_sp-color,
-                            var(
-                              --_ctm-mob-dn-dt-tt-cr,
-                              var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
-                            )
-                          );
+                          fill: var(--_sp-color,
+                              var(--_ctm-mob-dn-dt-tt-cr,
+                                var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))));
                         }
                       }
                     }
@@ -804,6 +789,7 @@ $defaultValues: (
 
                   &.list__img {
                     width: 100%;
+
                     img {
                       width: 100%;
                       height: 100%;
@@ -823,7 +809,7 @@ $defaultValues: (
             row-gap: 4px;
             width: clamp(#{$minWidth}, 100%, #{$maxWidth});
 
-            & > button {
+            &>button {
               display: var(--_d-flex);
               align-items: center;
               gap: 12px;
@@ -842,29 +828,30 @@ $defaultValues: (
               //       transparent var(--_perc-clr-bb)
               //     )
               //   );
-              border: 0.5px solid
-                color-mix(
-                  in srgb,
-                  var(
-                    --_fcs-clr,
-                    var(
-                        --_ctm-mob-dn-dt-tt-cr,
-                        var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
-                      )
-                      calc(100% - var(--_perc-clr-bb)),
-                    transparent var(--_perc-clr-bb)
-                  )
-                );
+              border: 0.5px solid color-mix(in srgb,
+                  var(--_fcs-clr,
+                    var(--_ctm-mob-dn-dt-tt-cr,
+                      var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))) calc(100% - var(--_perc-clr-bb)),
+                    transparent var(--_perc-clr-bb)));
               border-radius: 6px;
               overflow: clip;
               background: var(--_sf-scd-clr);
               --_perc-clr-bb: 85%;
 
-              & > span {
+              &>span {
                 display: var(--_d-flex);
                 color: #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)};
                 font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
                 font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
+                text-transform: prepareMediaVariable(--_ctm-dn-dt-tt-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
+                word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
+
+                &.flex__overflow {
+                  white-space: normal;
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
+
                 font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
                 font-weight: prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400);
                 line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
@@ -873,7 +860,7 @@ $defaultValues: (
               }
             }
 
-            & > ul {
+            &>ul {
               &.dropdown__list__v1 {
                 //   position: var(--_p-absolute);
                 //   z-index: 2;/
@@ -889,8 +876,7 @@ $defaultValues: (
                 border-radius: 6px;
                 transform: translateY(-5px);
                 opacity: 0;
-                animation: anim var(--_transition-duration) var(--_transition-timing-function) 1
-                  alternate forwards;
+                animation: anim var(--_transition-duration) var(--_transition-timing-function) 1 alternate forwards;
 
                 @keyframes anim {
                   to {
@@ -899,7 +885,7 @@ $defaultValues: (
                   }
                 }
 
-                & > li:not(.srch__li__v1) {
+                &>li:not(.srch__li__v1) {
                   padding: 10px;
                   display: var(--_d-flex);
                   align-items: center;
@@ -918,11 +904,13 @@ $defaultValues: (
                     --_sf-at-br-cr: var(--_gray-200);
                   }
 
-                  & > span {
+                  &>span {
                     &.list__text__v1 {
                       color: var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)});
                       font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
                       font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
+                      word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
+                      word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
                       font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
                       font-weight: var(--_fw-wt, prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400));
                       line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
@@ -936,18 +924,15 @@ $defaultValues: (
                       display: var(--_d-flex);
                       opacity: var(--_sf-ic-op, 1);
                       visibility: var(--_sf-ic-vt, hidden);
+
                       svg {
                         width: 16px;
                         height: 16px;
 
                         path {
-                          stroke: var(
-                            --_sp-color,
-                            var(
-                              --_ctm-mob-dn-dt-tt-cr,
-                              var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
-                            )
-                          );
+                          stroke: var(--_sp-color,
+                              var(--_ctm-mob-dn-dt-tt-cr,
+                                var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))));
                         }
                       }
                     }
@@ -962,7 +947,8 @@ $defaultValues: (
                   border-block-end: 1px solid var(--_gray-100);
                   z-index: 2;
                   flex-direction: column;
-                  & > input {
+
+                  &>input {
                     border: 1px solid var(--_gray-300);
                     //   box-shadow: var(--_shadow-xs);
                     height: 32px;
@@ -977,12 +963,12 @@ $defaultValues: (
           }
 
           // Color Picker Changes
-          & > .clr__pkr__v2 {
+          &>.clr__pkr__v2 {
             display: var(--_d-flex);
             align-items: center;
             padding-block: 12px;
 
-            & > .color__btn__v2 {
+            &>.color__btn__v2 {
               display: var(--_d-flex);
               --_sf-sz: 16px;
               width: var(--_sf-sz);
@@ -995,6 +981,7 @@ $defaultValues: (
               &[title="no-color"] {
                 position: relative;
                 background: #555;
+
                 &::before {
                   content: "";
                   position: absolute;
@@ -1012,7 +999,7 @@ $defaultValues: (
       }
     }
 
-    & > .emb__tmp__footer {
+    &>.emb__tmp__footer {
       display: var(--_d-flex);
       height: var(--_sf-bm-ht);
       align-items: center;
@@ -1020,12 +1007,12 @@ $defaultValues: (
       gap: 12px;
       padding: 8px 12px;
 
-      & > div {
+      &>div {
         display: var(--_d-flex);
         align-items: center;
         gap: 12px;
 
-        & > button {
+        &>button {
           display: flex;
           align-items: center;
           justify-content: center;
@@ -1038,10 +1025,8 @@ $defaultValues: (
           border-radius: 4px;
 
           &.emb__clear {
-            color: var(
-              --_ctm-mob-dn-dt-tt-cr,
-              var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
-            );
+            color: var(--_ctm-mob-dn-dt-tt-cr,
+                var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467)));
           }
 
           &.emb__save {
@@ -1051,7 +1036,7 @@ $defaultValues: (
             justify-content: center;
             @include spinnerStyles();
 
-            & > span {
+            &>span {
               display: var(--_d-flex);
               visibility: var(--_sf-sv-sp-vs, visible);
               opacity: var(--_sf-sv-sp-op, 1);
@@ -1068,4 +1053,4 @@ $defaultValues: (
       }
     }
   }
-}
+}