@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.75

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

@@ -55,7 +55,6 @@ $defaultValues: (
       from {
         transform: translate(-50%, -50%) rotate(0deg);
       }
-
       to {
         transform: translate(-50%, -50%) rotate(360deg);
       }
@@ -64,7 +63,7 @@ $defaultValues: (
 }
 
 @mixin EmbroideryTemplate1StylesV2() {
-  &>#{$tmpWrapper} {
+  & > #{$tmpWrapper} {
     @include prepareMediaQueries($defaultValues);
     --_sf-prm-clr: #000;
     --_sf-scd-clr: #fff;
@@ -80,7 +79,7 @@ $defaultValues: (
       gap: 12px;
       padding: 8px 12px;
 
-      &>#{$positionHeader} {
+      & > #{$positionHeader} {
         display: var(--_d-flex);
         cursor: pointer;
         align-items: center;
@@ -94,7 +93,6 @@ $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;
@@ -108,7 +106,7 @@ $defaultValues: (
       }
     }
 
-    &>#{$paListParent} {
+    & > #{$paListParent} {
       display: var(--_d-flex);
       flex-direction: column;
       row-gap: 16px;
@@ -121,7 +119,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));
@@ -133,7 +131,7 @@ $defaultValues: (
         }
 
         // Header
-        &>#{$positionHeader} {
+        & > #{$positionHeader} {
           display: var(--_d-flex);
           align-items: center;
           justify-content: space-between;
@@ -143,14 +141,17 @@ $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);
@@ -179,7 +180,7 @@ $defaultValues: (
                 transform: rotate(180deg);
               }
 
-              &>svg {
+              & > svg {
                 --_perc: 0.75;
                 width: calc(var(--_sf-size) * var(--_perc));
                 height: calc(var(--_sf-size) * var(--_perc));
@@ -211,7 +212,7 @@ $defaultValues: (
           color: #666666;
         }
 
-        &>.emb__rght__v2 {
+        & > .emb__rght__v2 {
           display: var(--_d-flex);
           flex-direction: column;
           row-gap: 16px;
@@ -220,7 +221,7 @@ $defaultValues: (
 
         // Preview
 
-        &>#{$previewMain} {
+        & > #{$previewMain} {
           width: 100%;
           display: var(--_d-flex);
           align-items: flex-start;
@@ -233,15 +234,16 @@ $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;
 
@@ -254,12 +256,14 @@ $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;
 
@@ -273,13 +277,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%);
@@ -288,13 +292,15 @@ $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;
@@ -325,12 +331,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;
@@ -348,13 +354,17 @@ $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;
@@ -365,34 +375,39 @@ $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);
@@ -409,9 +424,13 @@ $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))
+                    )
+                  );
                 }
               }
             }
@@ -449,7 +468,7 @@ $defaultValues: (
             align-items: center;
             gap: 8px;
 
-            &>span {
+            & > span {
               display: var(--_d-flex);
               cursor: pointer;
             }
@@ -468,9 +487,11 @@ $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%);
@@ -489,11 +510,19 @@ $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;
 
@@ -501,7 +530,7 @@ $defaultValues: (
               --_sf-vt-im: hidden;
               --_sf-vt-op: 0;
 
-              &>.output__div {
+              & > .output__div {
                 display: var(--_d-flex);
                 align-self: stretch;
                 justify-self: stretch;
@@ -515,7 +544,7 @@ $defaultValues: (
               }
             }
 
-            &>span {
+            & > span {
               &.label__span {
                 position: var(--_p-absolute);
                 pointer-events: none;
@@ -530,9 +559,8 @@ $defaultValues: (
                 align-items: center;
                 gap: 4px;
 
-                &>span {
+                & > span {
                   display: var(--_d-flex);
-
                   svg {
                     width: 18px;
                     height: 18px;
@@ -541,7 +569,6 @@ $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);
@@ -555,7 +582,7 @@ $defaultValues: (
               }
             }
 
-            &>input {
+            & > input {
               &[type="file"] {
                 position: var(--_p-absolute);
                 inset: 0 0 0 0;
@@ -567,7 +594,7 @@ $defaultValues: (
           }
 
           // Text Editor
-          &>.text__div {
+          & > .text__div {
             --_perc-clr-bb: 85%;
             border-radius: 4px;
             // border: 0.5px solid
@@ -581,9 +608,13 @@ $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;
 
@@ -595,7 +626,7 @@ $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);
@@ -614,13 +645,12 @@ $defaultValues: (
               }
             }
           }
-
-          &>.color__div {
+          & > .color__div {
             display: var(--_d-flex);
             flex-wrap: wrap;
             gap: 12px;
 
-            &>div {
+            & > div {
               &.color__box {
                 display: var(--_d-flex);
                 width: 24px;
@@ -639,7 +669,7 @@ $defaultValues: (
             }
           }
 
-          &>.config__div__v2 {
+          & > .config__div__v2 {
             display: var(--_d-flex);
             flex-direction: column;
             row-gap: 6px;
@@ -647,8 +677,7 @@ $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);
@@ -657,14 +686,13 @@ $defaultValues: (
               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;
@@ -680,13 +708,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;
@@ -704,9 +732,13 @@ $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;
 
@@ -718,7 +750,7 @@ $defaultValues: (
                   height: var(--_size-h);
                   position: var(--_p-relative);
 
-                  &>.list__icon {
+                  & > .list__icon {
                     position: var(--_p-absolute);
                     left: 2px;
                     top: 2px;
@@ -731,7 +763,6 @@ $defaultValues: (
                     --_sf-at-op: 1;
                   }
                 }
-
                 &,
                 * {
                   user-select: none;
@@ -742,9 +773,8 @@ $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);
@@ -769,19 +799,29 @@ $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))
+                            )
+                          );
                         }
                       }
                     }
@@ -789,7 +829,6 @@ $defaultValues: (
 
                   &.list__img {
                     width: 100%;
-
                     img {
                       width: 100%;
                       height: 100%;
@@ -809,7 +848,7 @@ $defaultValues: (
             row-gap: 4px;
             width: clamp(#{$minWidth}, 100%, #{$maxWidth});
 
-            &>button {
+            & > button {
               display: var(--_d-flex);
               align-items: center;
               gap: 12px;
@@ -828,17 +867,25 @@ $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);
@@ -846,12 +893,10 @@ $defaultValues: (
                 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);
@@ -860,7 +905,7 @@ $defaultValues: (
               }
             }
 
-            &>ul {
+            & > ul {
               &.dropdown__list__v1 {
                 //   position: var(--_p-absolute);
                 //   z-index: 2;/
@@ -876,7 +921,8 @@ $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 {
@@ -885,7 +931,7 @@ $defaultValues: (
                   }
                 }
 
-                &>li:not(.srch__li__v1) {
+                & > li:not(.srch__li__v1) {
                   padding: 10px;
                   display: var(--_d-flex);
                   align-items: center;
@@ -904,7 +950,7 @@ $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);
@@ -924,15 +970,18 @@ $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))
+                            )
+                          );
                         }
                       }
                     }
@@ -947,8 +996,7 @@ $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;
@@ -963,12 +1011,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);
@@ -981,7 +1029,6 @@ $defaultValues: (
               &[title="no-color"] {
                 position: relative;
                 background: #555;
-
                 &::before {
                   content: "";
                   position: absolute;
@@ -999,7 +1046,7 @@ $defaultValues: (
       }
     }
 
-    &>.emb__tmp__footer {
+    & > .emb__tmp__footer {
       display: var(--_d-flex);
       height: var(--_sf-bm-ht);
       align-items: center;
@@ -1007,12 +1054,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;
@@ -1025,8 +1072,10 @@ $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 {
@@ -1036,7 +1085,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);
@@ -1053,4 +1102,4 @@ $defaultValues: (
       }
     }
   }
-}
+}