@sc-360-v2/storefront-cms-library 0.4.47 → 0.4.50

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

@@ -1,937 +1,937 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-@use "./embroider-preview-element.scss" as *;
-@use "./colorpicker_v2.scss" as *;
-
-$tmpWrapper: ".emb__tmp__wrapper";
-$tmpHeaderV2: ".emb__tmp__header__v2";
-$paListParent: ".emb__tmp__pa__list";
-$pacListParent: ".emb__tmp__pac__parent";
-$positionHeader: ".emb__tmp__psn__header";
-$grpDiv: ".grp__div";
-$positionToggleDiv: ".psn__tgle__parent";
-$tmpDsWrapper: ".emb__tmp1__ds__wrapper";
-$previewMain: ".emb__preview__me";
-$previewMainWrapper: ".emb__preview__me__wrapper";
-$previewMainOuput: ".output__ele__v1";
-$maxWidth: "350px";
-$minWidth: "200px";
-$dataIsSpinningTrue: "[data-is-loading='true']";
-
-$defaultValues: (
-  --_sf-plp-flx-drt: getListOfResponsive(row, column),
-  --_sf-prv-psn-vlu: getListOfResponsive(sticky, static),
-  --_sf-prv-prt-gap: getListOfResponsive(32px, 12px),
-);
-
-@mixin spinnerStyles() {
-  &#{$dataIsSpinningTrue} {
-    --_sf-sv-sp-vs: hidden;
-    --_sf-sv-sp-op: 0;
-    position: var(--_p-relative);
-
-    &::before {
-      content: "";
-      position: var(--_p-absolute);
-      --_sz-vl: 10px;
-      width: var(--_sz-vl);
-      height: var(--_sz-vl);
-      display: var(--_d-flex);
-      left: 50%;
-      top: 50%;
-      border-radius: 50%;
-      border: 0.25rem solid var(--_br-bm-red-col-afsjkdfkj-ff, rgba(255, 255, 255, 0.2));
-      // border: 0.25rem solid var(--_primary-400);
-      border-top-color: #fff;
-      animation: circlerotate 2s ease-in-out infinite forwards;
-    }
-
-    @keyframes circlerotate {
-      from {
-        transform: translate(-50%, -50%) rotate(0deg);
-      }
-      to {
-        transform: translate(-50%, -50%) rotate(360deg);
-      }
-    }
-  }
-}
-
-@mixin EmbroideryTemplate1StylesV2() {
-  & > #{$tmpWrapper} {
-    @include prepareMediaQueries($defaultValues);
-    --_sf-prm-clr: #000;
-    --_sf-scd-clr: #fff;
-    display: var(--_d-flex);
-    height: 100%;
-    flex-direction: column;
-    --_sf-bm-ht: 48px;
-    // gap: 12px;
-
-    #{$tmpHeaderV2} {
-      display: var(--_d-flex);
-      align-items: center;
-      gap: 12px;
-      padding: 8px 12px;
-
-      & > #{$positionHeader} {
-        display: var(--_d-flex);
-        cursor: pointer;
-        align-items: center;
-        justify-content: center;
-        padding: 6px 8px;
-
-        font-size: 12px;
-        text-transform: uppercase;
-        line-height: 20px;
-        font-weight: var(--_sp-act-fw, 400);
-        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;
-        }
-
-        &[data-state="active"] {
-          --_sp-act-fw: 600;
-          --_sp-act-clr: var(--_sf-prm-clr);
-          --_sp-act-cl: var(--_sf-scd-clr);
-        }
-      }
-    }
-
-    & > #{$paListParent} {
-      display: var(--_d-flex);
-      flex-direction: column;
-      row-gap: 16px;
-      width: 100%;
-      background: #f2f2f2;
-      padding: 12px;
-      height: calc(100% - (2 * var(--_sf-bm-ht)));
-      overflow-y: auto;
-
-      & > #{$pacListParent} {
-        display: var(--_d-flex);
-        flex-direction: var(--_sf-plp-flx-drt);
-        gap: var(--_sf-prv-prt-gap);
-
-        // Header
-        & > #{$positionHeader} {
-          display: var(--_d-flex);
-          align-items: center;
-          justify-content: space-between;
-          gap: 8px;
-
-          & > span {
-            display: var(--_d-flex);
-            &.tt1 {
-              color: prepareMediaVariable(--_ctm-dn-te-cr, #101828);
-              font-size: prepareMediaVariable(--_ctm-dn-te-ft-se, 30px);
-              font-weight: prepareMediaVariable(--_ctm-dn-te-ft-wt, 500);
-              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-decoration: prepareMediaVariable(--_ctm-dn-te-ue);
-              letter-spacing: prepareMediaVariable(--_ctm-dn-te-lr-sg);
-              text-align: prepareMediaVariable(--_ctm-dn-te-tt-an);
-            }
-
-            &.icn1 {
-              --_sf-size: 24px;
-              width: var(--_sf-size);
-              height: var(--_sf-size);
-              align-items: center;
-              justify-content: center;
-              transition: transform 0.45s ease-in-out;
-              cursor: pointer;
-
-              &[data-is-open="true"] {
-                transform: rotate(180deg);
-              }
-
-              & > svg {
-                --_perc: 0.75;
-                width: calc(var(--_sf-size) * var(--_perc));
-                height: calc(var(--_sf-size) * var(--_perc));
-
-                path {
-                  stroke: prepareMediaVariable(--_ctm-dn-te-cr, #667085);
-                }
-              }
-            }
-          }
-        }
-
-        & > .emb__rght__v2 {
-          display: var(--_d-flex);
-          flex-direction: column;
-          row-gap: 16px;
-          width: 100%;
-
-          .mandatory__label__v1 {
-            font-size: 14px;
-            color: #666666;
-          }
-        }
-
-        // Preview
-
-        & > #{$previewMain} {
-          width: 100%;
-          display: var(--_d-flex);
-          align-items: flex-start;
-          justify-content: center;
-          max-width: 400px;
-          // --_perc-1: 20%;
-          // background: color-mix(
-          //   in srgb,
-          //   #000 calc(100% - var(--_perc-1, 0%)),
-          //   transparent var(--_perc-1, 0%)
-          // );
-          --_alpha: 85%;
-          background: color-mix(
-            in srgb,
-            var(--_sf-prm-clr) calc(100% - var(--_alpha)),
-            transparent var(--_alpha)
-          );
-          padding: 8px;
-          border-radius: 6px;
-
-          flex-direction: column;
-          row-gap: 6px;
-
-          position: var(--_sf-prv-psn-vlu);
-          top: 0;
-          align-self: flex-start;
-
-          & > .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)
-            );
-            font-size: 14px;
-            font-weight: 600;
-          }
-
-          & > #{$previewMainWrapper} {
-            display: var(--_d-flex);
-            // flex-direction: column;
-            max-width: min(500px, 100%);
-            align-items: center;
-            width: 100%;
-            justify-content: center;
-            position: var(--_p-relative);
-            --_blk-perc: 5%;
-            background: color-mix(
-              in srgb,
-              var(--_base-white) calc(100% - #{var(--_blk-perc)}),
-              var(--_base-black) var(--_blk-perc)
-            );
-            border-radius: 6px;
-            min-height: var(--_sf-emb-prw-mn-ht-vl, 150px);
-
-            & > #{$previewMainOuput} {
-              display: var(--_d-grid);
-              width: 100%;
-              align-self: stretch;
-
-              // Image Element CSS
-              @include FlexEmbroideryPreviewStyles(1);
-
-              // Text Element CSS
-              @include FlexEmbroideryPreviewStyles(2);
-            }
-          }
-        }
-
-        // Position Toggle
-        #{$positionToggleDiv} {
-          display: var(--_d-grid);
-          width: 100%;
-          --_gap: 12px;
-          --_col: 2;
-          gap: var(--_gap);
-          //   grid-template-columns: getRepeatColWidth(--_col, --_gap);
-          grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
-          align-items: center;
-
-          & > button {
-            min-height: 40px;
-            display: var(--_d-flex);
-            align-items: center;
-            justify-content: center;
-            padding: 8px 12px;
-            border-radius: 4px;
-            --_perc-clr-bb: 50%;
-            border: 0.5px solid
-              var(
-                --_sp-color,
-                color-mix(
-                  in srgb,
-                  #{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 {
-              display: var(--_d-flex);
-              align-items: center;
-              justify-content: center;
-
-              svg {
-                width: 20px;
-                height: 20px;
-
-                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%
-                    );
-                  }
-                }
-              }
-            }
-
-            & > .pac__name__div {
-              display: var(--_d-flex);
-              align-items: center;
-              gap: 8px;
-
-              & > .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);
-                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);
-                letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
-                text-transform: capitalize;
-
-                @include restrictToLinesShow(1);
-              }
-            }
-
-            &.acv {
-              --_sp-color: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
-              --_fw-wt: #{prepareMediaVariable(--_ctm-dn-ae-tt-ft-wt, 600)};
-
-              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))
-                    )
-                  );
-                }
-              }
-            }
-          }
-        }
-
-        // Data Settings Wrapper
-
-        #{$tmpDsWrapper} {
-          display: var(--_d-flex);
-          flex-direction: column;
-          row-gap: 16px;
-        }
-
-        #{$grpDiv} {
-          display: var(--_d-flex);
-          flex-direction: var(--_sf-fdr-vl, column);
-          gap: 6px;
-          width: 100%;
-
-          &:has([class*="clr__pkr"]) {
-            --_sf-fdr-vl: row;
-            justify-content: space-between;
-            align-items: center;
-            max-width: min(#{$maxWidth}, 100%);
-
-            &:has(.config__div__v2) {
-              flex-wrap: wrap;
-            }
-          }
-
-          & > label {
-            color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
-            font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
-            font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
-            font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
-            font-weight: 500;
-            line-height: 24px;
-          }
-
-          // 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))
-            );
-            background: color-mix(in srgb, var(--_sp-iu-clr, transparent) 6%, transparent 94%);
-            height: 75px;
-            width: min(#{$maxWidth}, 100%);
-            border-radius: 4px;
-            --_perc-clr-bb: 50%;
-            border: 0.5px dashed
-              var(
-                --_sp-iu-clr,
-                color-mix(
-                  in srgb,
-                  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;
-
-            &[data-has-content="true"] {
-              --_sf-vt-im: hidden;
-              --_sf-vt-op: 0;
-
-              & > .output__div {
-                display: var(--_d-flex);
-                align-self: stretch;
-                justify-self: stretch;
-                height: 100%;
-
-                img {
-                  width: 100%;
-                  height: 100%;
-                  object-fit: contain;
-                }
-              }
-            }
-
-            & > span {
-              &.label__span {
-                position: var(--_p-absolute);
-                pointer-events: none;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-                cursor: pointer;
-                visibility: var(--_sf-vt-im, visible);
-                opacity: var(--_sf-op-im, 1);
-
-                display: var(--_d-flex);
-                align-items: center;
-                gap: 4px;
-
-                & > span {
-                  display: var(--_d-flex);
-                  svg {
-                    width: 18px;
-                    height: 18px;
-
-                    path {
-                      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);
-                    text-transform: uppercase;
-                    line-height: 1;
-                    color: var(--_sp-iu-clr);
-                  }
-                }
-              }
-            }
-
-            & > input {
-              &[type="file"] {
-                position: var(--_p-absolute);
-                inset: 0 0 0 0;
-                opacity: 0;
-                height: 100%;
-                cursor: pointer;
-              }
-            }
-          }
-
-          // Text Editor
-          & > .text__div {
-            --_perc-clr-bb: 50%;
-            border-radius: 4px;
-            border: 0.5px solid
-              var(
-                --_fcs-clr,
-                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;
-
-            &:has(input) {
-              width: min(#{$maxWidth}, 100%);
-            }
-
-            &:has(:focus) {
-              --_fcs-clr: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
-            }
-
-            & > 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);
-              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);
-              letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
-              border: none;
-              height: auto;
-
-              &:focus {
-                outline: none;
-              }
-            }
-          }
-          & > .color__div {
-            display: var(--_d-flex);
-            flex-wrap: wrap;
-            gap: 12px;
-
-            & > div {
-              &.color__box {
-                display: var(--_d-flex);
-                width: 24px;
-                height: 24px;
-                border-radius: 50%;
-                background: var(--_sf-clr);
-                border: 1px solid #f2f4f7;
-                cursor: pointer;
-
-                &.act {
-                  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-                  width: 36px;
-                  border-radius: 16px;
-                }
-              }
-            }
-          }
-
-          & > .config__div__v2 {
-            display: var(--_d-flex);
-            flex-direction: column;
-            row-gap: 6px;
-
-            &:is(.clr__pkr__v2 + *) {
-              flex: 0 0 100%;
-            }
-            & > .err__msg__v2 {
-              color: #d32f2f;
-              font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
-              font-size: 14px;
-              line-height: 1.5;
-            }
-            ul {
-              display: flex;
-              flex-direction: column;
-              row-gap: 6px;
-              margin-inline-start: 16px;
-
-              & > 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);
-                font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
-                line-height: 1.4;
-              }
-            }
-          }
-
-          // Common Dropdown
-          & > .cmn__drp__parent__v2 {
-            & > ul {
-              display: var(--_d-flex);
-              flex-wrap: wrap;
-              gap: 12px;
-
-              & > li {
-                display: var(--_d-flex);
-                align-content: center;
-                gap: 6px;
-                padding: 8px 12px;
-                border-radius: 4px;
-                --_perc-clr-bb: 50%;
-                border: 0.5px solid
-                  var(
-                    --_sp-color,
-                    color-mix(
-                      in srgb,
-                      #{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;
-
-                &:has(.list__img) {
-                  --_size-w: 128px;
-                  --_size-h: 48px;
-
-                  width: var(--_size-w);
-                  height: var(--_size-h);
-                  position: var(--_p-relative);
-
-                  & > .list__icon {
-                    position: var(--_p-absolute);
-                    left: 2px;
-                    top: 2px;
-                    visibility: var(--_sf-at-vt, hidden);
-                    opacity: var(--_sf-at-op, 0);
-                  }
-
-                  &.active {
-                    --_sf-at-vt: visible;
-                    --_sf-at-op: 1;
-                  }
-                }
-                &,
-                * {
-                  user-select: none;
-                }
-
-                &.active {
-                  --_sp-color: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
-                  --_fw-wt: #{prepareMediaVariable(--_ctm-dn-ae-tt-ft-wt, 600)};
-                }
-
-                & > 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);
-                    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);
-                    letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
-                    text-transform: capitalize;
-                  }
-
-                  &.list__icon {
-                    display: var(--_d-flex);
-                    align-items: center;
-                    justify-content: center;
-
-                    svg {
-                      width: 20px;
-                      height: 20px;
-
-                      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%
-                          );
-                        }
-                      }
-                      &: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))
-                            )
-                          );
-                        }
-                      }
-                    }
-                  }
-
-                  &.list__img {
-                    width: 100%;
-                    img {
-                      width: 100%;
-                      height: 100%;
-                      object-fit: contain;
-                    }
-                  }
-                }
-              }
-            }
-          }
-
-          // Font Family
-
-          .cmn__drp__parent__v1 {
-            display: var(--_d-flex);
-            flex-direction: column;
-            row-gap: 4px;
-            width: clamp(#{$minWidth}, 100%, #{$maxWidth});
-
-            & > button {
-              display: var(--_d-flex);
-              align-items: center;
-              gap: 12px;
-              justify-content: space-between;
-              padding: 8px 12px;
-              border: 0.5px solid
-                var(
-                  --_fcs-clr,
-                  color-mix(
-                    in srgb,
-                    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: 50%;
-
-              & > 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);
-                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);
-                letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
-                @include restrictToLinesShow(1);
-              }
-            }
-
-            & > ul {
-              &.dropdown__list__v1 {
-                //   position: var(--_p-absolute);
-                //   z-index: 2;/
-                //   right: 0;
-                //   top: calc(100% + var(--_height-1));
-                max-height: 200px;
-                min-width: 100%;
-                overflow-y: auto;
-                background: var(--_base-white);
-                border: 1px solid var(--_gray-200);
-                // box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-                box-shadow: var(--_shadow-x1);
-                border-radius: 6px;
-                transform: translateY(-5px);
-                opacity: 0;
-                animation: anim var(--_transition-duration) var(--_transition-timing-function) 1
-                  alternate forwards;
-
-                @keyframes anim {
-                  to {
-                    transform: translateY(0px);
-                    opacity: 1;
-                  }
-                }
-
-                & > li:not(.srch__li__v1) {
-                  padding: 10px;
-                  display: var(--_d-flex);
-                  align-items: center;
-                  justify-content: space-between;
-                  gap: 4px;
-                  background: color-mix(in srgb, var(--_sp-color, transparent) 6%, transparent 94%);
-                  cursor: pointer;
-
-                  &.active__v1 {
-                    --_sp-color: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
-                    --_fw-wt: #{prepareMediaVariable(--_ctm-dn-ae-tt-ft-wt, 600)};
-
-                    --_sf-at-bg: var(--_primary-25);
-                    --_sf-ic-op: 1;
-                    --_sf-ic-vt: visible;
-                    --_sf-at-br-cr: var(--_gray-200);
-                  }
-
-                  & > 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);
-                      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);
-                      letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
-                      text-align: start;
-                      text-transform: capitalize;
-                      @include restrictToLinesShow(1);
-                    }
-
-                    &.list__icon__v1 {
-                      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))
-                            )
-                          );
-                        }
-                      }
-                    }
-                  }
-                }
-
-                .srch__li__v1 {
-                  padding: 6px;
-                  position: var(--_p-sticky);
-                  top: 0;
-                  background: var(--_base-white);
-                  border-block-end: 1px solid var(--_gray-100);
-                  z-index: 2;
-                  flex-direction: column;
-                  & > input {
-                    border: 1px solid var(--_gray-300);
-                    //   box-shadow: var(--_shadow-xs);
-                    height: 32px;
-                    border-radius: 4px;
-                    font-size: 14px;
-                    padding-inline: 8px;
-                    color: var(--_gray-600);
-                  }
-                }
-              }
-            }
-          }
-
-          // Color Picker Changes
-          & > .clr__pkr__v2 {
-            display: var(--_d-flex);
-            align-items: center;
-            padding-block: 12px;
-
-            & > .color__btn__v2 {
-              display: var(--_d-flex);
-              --_sf-sz: 16px;
-              width: var(--_sf-sz);
-              height: var(--_sf-sz);
-              background: var(--_sf-clr-pkr-bg, #000);
-              border: 1px solid #555;
-              border-radius: 50%;
-              cursor: pointer;
-
-              &[title="no-color"] {
-                position: relative;
-                background: #555;
-                &::before {
-                  content: "";
-                  position: absolute;
-                  left: 50%;
-                  top: 50%;
-                  width: 100%;
-                  height: 1px;
-                  background: #fff;
-                  transform: translate(-50%, -50%) rotate(-45deg);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    & > .emb__tmp__footer {
-      display: var(--_d-flex);
-      height: var(--_sf-bm-ht);
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      padding: 8px 12px;
-
-      & > div {
-        display: var(--_d-flex);
-        align-items: center;
-        gap: 12px;
-
-        & > button {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 6px 8px;
-
-          font-size: 12px;
-          text-transform: uppercase;
-          line-height: 20px;
-
-          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))
-            );
-          }
-
-          &.emb__save {
-            background: var(--_sf-prm-clr);
-            color: var(--_sf-scd-clr);
-            border: 1px solid var(--_sf-prm-clr);
-            justify-content: center;
-            @include spinnerStyles();
-
-            & > span {
-              display: var(--_d-flex);
-              visibility: var(--_sf-sv-sp-vs, visible);
-              opacity: var(--_sf-sv-sp-op, 1);
-            }
-          }
-
-          &.emb__cancel {
-            background: transparent;
-            color: var(--_sf-prm-clr);
-            // border: 1px solid var(--_sf-prm-clr);
-            border: 1px solid transparent;
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+@use "./embroider-preview-element.scss" as *;
+@use "./colorpicker_v2.scss" as *;
+
+$tmpWrapper: ".emb__tmp__wrapper";
+$tmpHeaderV2: ".emb__tmp__header__v2";
+$paListParent: ".emb__tmp__pa__list";
+$pacListParent: ".emb__tmp__pac__parent";
+$positionHeader: ".emb__tmp__psn__header";
+$grpDiv: ".grp__div";
+$positionToggleDiv: ".psn__tgle__parent";
+$tmpDsWrapper: ".emb__tmp1__ds__wrapper";
+$previewMain: ".emb__preview__me";
+$previewMainWrapper: ".emb__preview__me__wrapper";
+$previewMainOuput: ".output__ele__v1";
+$maxWidth: "350px";
+$minWidth: "200px";
+$dataIsSpinningTrue: "[data-is-loading='true']";
+
+$defaultValues: (
+  --_sf-plp-flx-drt: getListOfResponsive(row, column),
+  --_sf-prv-psn-vlu: getListOfResponsive(sticky, static),
+  --_sf-prv-prt-gap: getListOfResponsive(32px, 12px),
+);
+
+@mixin spinnerStyles() {
+  &#{$dataIsSpinningTrue} {
+    --_sf-sv-sp-vs: hidden;
+    --_sf-sv-sp-op: 0;
+    position: var(--_p-relative);
+
+    &::before {
+      content: "";
+      position: var(--_p-absolute);
+      --_sz-vl: 10px;
+      width: var(--_sz-vl);
+      height: var(--_sz-vl);
+      display: var(--_d-flex);
+      left: 50%;
+      top: 50%;
+      border-radius: 50%;
+      border: 0.25rem solid var(--_br-bm-red-col-afsjkdfkj-ff, rgba(255, 255, 255, 0.2));
+      // border: 0.25rem solid var(--_primary-400);
+      border-top-color: #fff;
+      animation: circlerotate 2s ease-in-out infinite forwards;
+    }
+
+    @keyframes circlerotate {
+      from {
+        transform: translate(-50%, -50%) rotate(0deg);
+      }
+      to {
+        transform: translate(-50%, -50%) rotate(360deg);
+      }
+    }
+  }
+}
+
+@mixin EmbroideryTemplate1StylesV2() {
+  & > #{$tmpWrapper} {
+    @include prepareMediaQueries($defaultValues);
+    --_sf-prm-clr: #000;
+    --_sf-scd-clr: #fff;
+    display: var(--_d-flex);
+    height: 100%;
+    flex-direction: column;
+    --_sf-bm-ht: 48px;
+    // gap: 12px;
+
+    #{$tmpHeaderV2} {
+      display: var(--_d-flex);
+      align-items: center;
+      gap: 12px;
+      padding: 8px 12px;
+
+      & > #{$positionHeader} {
+        display: var(--_d-flex);
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+        padding: 6px 8px;
+
+        font-size: 12px;
+        text-transform: uppercase;
+        line-height: 20px;
+        font-weight: var(--_sp-act-fw, 400);
+        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;
+        }
+
+        &[data-state="active"] {
+          --_sp-act-fw: 600;
+          --_sp-act-clr: var(--_sf-prm-clr);
+          --_sp-act-cl: var(--_sf-scd-clr);
+        }
+      }
+    }
+
+    & > #{$paListParent} {
+      display: var(--_d-flex);
+      flex-direction: column;
+      row-gap: 16px;
+      width: 100%;
+      background: #f2f2f2;
+      padding: 12px;
+      height: calc(100% - (2 * var(--_sf-bm-ht)));
+      overflow-y: auto;
+
+      & > #{$pacListParent} {
+        display: var(--_d-flex);
+        flex-direction: var(--_sf-plp-flx-drt);
+        gap: var(--_sf-prv-prt-gap);
+
+        // Header
+        & > #{$positionHeader} {
+          display: var(--_d-flex);
+          align-items: center;
+          justify-content: space-between;
+          gap: 8px;
+
+          & > span {
+            display: var(--_d-flex);
+            &.tt1 {
+              color: prepareMediaVariable(--_ctm-dn-te-cr, #101828);
+              font-size: prepareMediaVariable(--_ctm-dn-te-ft-se, 30px);
+              font-weight: prepareMediaVariable(--_ctm-dn-te-ft-wt, 500);
+              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-decoration: prepareMediaVariable(--_ctm-dn-te-ue);
+              letter-spacing: prepareMediaVariable(--_ctm-dn-te-lr-sg);
+              text-align: prepareMediaVariable(--_ctm-dn-te-tt-an);
+            }
+
+            &.icn1 {
+              --_sf-size: 24px;
+              width: var(--_sf-size);
+              height: var(--_sf-size);
+              align-items: center;
+              justify-content: center;
+              transition: transform 0.45s ease-in-out;
+              cursor: pointer;
+
+              &[data-is-open="true"] {
+                transform: rotate(180deg);
+              }
+
+              & > svg {
+                --_perc: 0.75;
+                width: calc(var(--_sf-size) * var(--_perc));
+                height: calc(var(--_sf-size) * var(--_perc));
+
+                path {
+                  stroke: prepareMediaVariable(--_ctm-dn-te-cr, #667085);
+                }
+              }
+            }
+          }
+        }
+
+        & > .emb__rght__v2 {
+          display: var(--_d-flex);
+          flex-direction: column;
+          row-gap: 16px;
+          width: 100%;
+
+          .mandatory__label__v1 {
+            font-size: 14px;
+            color: #666666;
+          }
+        }
+
+        // Preview
+
+        & > #{$previewMain} {
+          width: 100%;
+          display: var(--_d-flex);
+          align-items: flex-start;
+          justify-content: center;
+          max-width: 400px;
+          // --_perc-1: 20%;
+          // background: color-mix(
+          //   in srgb,
+          //   #000 calc(100% - var(--_perc-1, 0%)),
+          //   transparent var(--_perc-1, 0%)
+          // );
+          --_alpha: 85%;
+          background: color-mix(
+            in srgb,
+            var(--_sf-prm-clr) calc(100% - var(--_alpha)),
+            transparent var(--_alpha)
+          );
+          padding: 8px;
+          border-radius: 6px;
+
+          flex-direction: column;
+          row-gap: 6px;
+
+          position: var(--_sf-prv-psn-vlu);
+          top: 0;
+          align-self: flex-start;
+
+          & > .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)
+            );
+            font-size: 14px;
+            font-weight: 600;
+          }
+
+          & > #{$previewMainWrapper} {
+            display: var(--_d-flex);
+            // flex-direction: column;
+            max-width: min(500px, 100%);
+            align-items: center;
+            width: 100%;
+            justify-content: center;
+            position: var(--_p-relative);
+            --_blk-perc: 5%;
+            background: color-mix(
+              in srgb,
+              var(--_base-white) calc(100% - #{var(--_blk-perc)}),
+              var(--_base-black) var(--_blk-perc)
+            );
+            border-radius: 6px;
+            min-height: var(--_sf-emb-prw-mn-ht-vl, 150px);
+
+            & > #{$previewMainOuput} {
+              display: var(--_d-grid);
+              width: 100%;
+              align-self: stretch;
+
+              // Image Element CSS
+              @include FlexEmbroideryPreviewStyles(1);
+
+              // Text Element CSS
+              @include FlexEmbroideryPreviewStyles(2);
+            }
+          }
+        }
+
+        // Position Toggle
+        #{$positionToggleDiv} {
+          display: var(--_d-grid);
+          width: 100%;
+          --_gap: 12px;
+          --_col: 2;
+          gap: var(--_gap);
+          //   grid-template-columns: getRepeatColWidth(--_col, --_gap);
+          grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
+          align-items: center;
+
+          & > button {
+            min-height: 40px;
+            display: var(--_d-flex);
+            align-items: center;
+            justify-content: center;
+            padding: 8px 12px;
+            border-radius: 4px;
+            --_perc-clr-bb: 50%;
+            border: 0.5px solid
+              var(
+                --_sp-color,
+                color-mix(
+                  in srgb,
+                  #{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 {
+              display: var(--_d-flex);
+              align-items: center;
+              justify-content: center;
+
+              svg {
+                width: 20px;
+                height: 20px;
+
+                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%
+                    );
+                  }
+                }
+              }
+            }
+
+            & > .pac__name__div {
+              display: var(--_d-flex);
+              align-items: center;
+              gap: 8px;
+
+              & > .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);
+                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);
+                letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
+                text-transform: capitalize;
+
+                @include restrictToLinesShow(1);
+              }
+            }
+
+            &.acv {
+              --_sp-color: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
+              --_fw-wt: #{prepareMediaVariable(--_ctm-dn-ae-tt-ft-wt, 600)};
+
+              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))
+                    )
+                  );
+                }
+              }
+            }
+          }
+        }
+
+        // Data Settings Wrapper
+
+        #{$tmpDsWrapper} {
+          display: var(--_d-flex);
+          flex-direction: column;
+          row-gap: 16px;
+        }
+
+        #{$grpDiv} {
+          display: var(--_d-flex);
+          flex-direction: var(--_sf-fdr-vl, column);
+          gap: 6px;
+          width: 100%;
+
+          &:has([class*="clr__pkr"]) {
+            --_sf-fdr-vl: row;
+            justify-content: space-between;
+            align-items: center;
+            max-width: min(#{$maxWidth}, 100%);
+
+            &:has(.config__div__v2) {
+              flex-wrap: wrap;
+            }
+          }
+
+          & > label {
+            color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
+            font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
+            font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
+            font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
+            font-weight: 500;
+            line-height: 24px;
+          }
+
+          // 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))
+            );
+            background: color-mix(in srgb, var(--_sp-iu-clr, transparent) 6%, transparent 94%);
+            height: 75px;
+            width: min(#{$maxWidth}, 100%);
+            border-radius: 4px;
+            --_perc-clr-bb: 50%;
+            border: 0.5px dashed
+              var(
+                --_sp-iu-clr,
+                color-mix(
+                  in srgb,
+                  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;
+
+            &[data-has-content="true"] {
+              --_sf-vt-im: hidden;
+              --_sf-vt-op: 0;
+
+              & > .output__div {
+                display: var(--_d-flex);
+                align-self: stretch;
+                justify-self: stretch;
+                height: 100%;
+
+                img {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: contain;
+                }
+              }
+            }
+
+            & > span {
+              &.label__span {
+                position: var(--_p-absolute);
+                pointer-events: none;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                cursor: pointer;
+                visibility: var(--_sf-vt-im, visible);
+                opacity: var(--_sf-op-im, 1);
+
+                display: var(--_d-flex);
+                align-items: center;
+                gap: 4px;
+
+                & > span {
+                  display: var(--_d-flex);
+                  svg {
+                    width: 18px;
+                    height: 18px;
+
+                    path {
+                      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);
+                    text-transform: uppercase;
+                    line-height: 1;
+                    color: var(--_sp-iu-clr);
+                  }
+                }
+              }
+            }
+
+            & > input {
+              &[type="file"] {
+                position: var(--_p-absolute);
+                inset: 0 0 0 0;
+                opacity: 0;
+                height: 100%;
+                cursor: pointer;
+              }
+            }
+          }
+
+          // Text Editor
+          & > .text__div {
+            --_perc-clr-bb: 50%;
+            border-radius: 4px;
+            border: 0.5px solid
+              var(
+                --_fcs-clr,
+                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;
+
+            &:has(input) {
+              width: min(#{$maxWidth}, 100%);
+            }
+
+            &:has(:focus) {
+              --_fcs-clr: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
+            }
+
+            & > 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);
+              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);
+              letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
+              border: none;
+              height: auto;
+
+              &:focus {
+                outline: none;
+              }
+            }
+          }
+          & > .color__div {
+            display: var(--_d-flex);
+            flex-wrap: wrap;
+            gap: 12px;
+
+            & > div {
+              &.color__box {
+                display: var(--_d-flex);
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                background: var(--_sf-clr);
+                border: 1px solid #f2f4f7;
+                cursor: pointer;
+
+                &.act {
+                  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+                  width: 36px;
+                  border-radius: 16px;
+                }
+              }
+            }
+          }
+
+          & > .config__div__v2 {
+            display: var(--_d-flex);
+            flex-direction: column;
+            row-gap: 6px;
+
+            &:is(.clr__pkr__v2 + *) {
+              flex: 0 0 100%;
+            }
+            & > .err__msg__v2 {
+              color: #d32f2f;
+              font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
+              font-size: 14px;
+              line-height: 1.5;
+            }
+            ul {
+              display: flex;
+              flex-direction: column;
+              row-gap: 6px;
+              margin-inline-start: 16px;
+
+              & > 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);
+                font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
+                line-height: 1.4;
+              }
+            }
+          }
+
+          // Common Dropdown
+          & > .cmn__drp__parent__v2 {
+            & > ul {
+              display: var(--_d-flex);
+              flex-wrap: wrap;
+              gap: 12px;
+
+              & > li {
+                display: var(--_d-flex);
+                align-content: center;
+                gap: 6px;
+                padding: 8px 12px;
+                border-radius: 4px;
+                --_perc-clr-bb: 50%;
+                border: 0.5px solid
+                  var(
+                    --_sp-color,
+                    color-mix(
+                      in srgb,
+                      #{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;
+
+                &:has(.list__img) {
+                  --_size-w: 128px;
+                  --_size-h: 48px;
+
+                  width: var(--_size-w);
+                  height: var(--_size-h);
+                  position: var(--_p-relative);
+
+                  & > .list__icon {
+                    position: var(--_p-absolute);
+                    left: 2px;
+                    top: 2px;
+                    visibility: var(--_sf-at-vt, hidden);
+                    opacity: var(--_sf-at-op, 0);
+                  }
+
+                  &.active {
+                    --_sf-at-vt: visible;
+                    --_sf-at-op: 1;
+                  }
+                }
+                &,
+                * {
+                  user-select: none;
+                }
+
+                &.active {
+                  --_sp-color: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
+                  --_fw-wt: #{prepareMediaVariable(--_ctm-dn-ae-tt-ft-wt, 600)};
+                }
+
+                & > 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);
+                    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);
+                    letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
+                    text-transform: capitalize;
+                  }
+
+                  &.list__icon {
+                    display: var(--_d-flex);
+                    align-items: center;
+                    justify-content: center;
+
+                    svg {
+                      width: 20px;
+                      height: 20px;
+
+                      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%
+                          );
+                        }
+                      }
+                      &: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))
+                            )
+                          );
+                        }
+                      }
+                    }
+                  }
+
+                  &.list__img {
+                    width: 100%;
+                    img {
+                      width: 100%;
+                      height: 100%;
+                      object-fit: contain;
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          // Font Family
+
+          .cmn__drp__parent__v1 {
+            display: var(--_d-flex);
+            flex-direction: column;
+            row-gap: 4px;
+            width: clamp(#{$minWidth}, 100%, #{$maxWidth});
+
+            & > button {
+              display: var(--_d-flex);
+              align-items: center;
+              gap: 12px;
+              justify-content: space-between;
+              padding: 8px 12px;
+              border: 0.5px solid
+                var(
+                  --_fcs-clr,
+                  color-mix(
+                    in srgb,
+                    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: 50%;
+
+              & > 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);
+                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);
+                letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
+                @include restrictToLinesShow(1);
+              }
+            }
+
+            & > ul {
+              &.dropdown__list__v1 {
+                //   position: var(--_p-absolute);
+                //   z-index: 2;/
+                //   right: 0;
+                //   top: calc(100% + var(--_height-1));
+                max-height: 200px;
+                min-width: 100%;
+                overflow-y: auto;
+                background: var(--_base-white);
+                border: 1px solid var(--_gray-200);
+                // box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+                box-shadow: var(--_shadow-x1);
+                border-radius: 6px;
+                transform: translateY(-5px);
+                opacity: 0;
+                animation: anim var(--_transition-duration) var(--_transition-timing-function) 1
+                  alternate forwards;
+
+                @keyframes anim {
+                  to {
+                    transform: translateY(0px);
+                    opacity: 1;
+                  }
+                }
+
+                & > li:not(.srch__li__v1) {
+                  padding: 10px;
+                  display: var(--_d-flex);
+                  align-items: center;
+                  justify-content: space-between;
+                  gap: 4px;
+                  background: color-mix(in srgb, var(--_sp-color, transparent) 6%, transparent 94%);
+                  cursor: pointer;
+
+                  &.active__v1 {
+                    --_sp-color: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
+                    --_fw-wt: #{prepareMediaVariable(--_ctm-dn-ae-tt-ft-wt, 600)};
+
+                    --_sf-at-bg: var(--_primary-25);
+                    --_sf-ic-op: 1;
+                    --_sf-ic-vt: visible;
+                    --_sf-at-br-cr: var(--_gray-200);
+                  }
+
+                  & > 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);
+                      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);
+                      letter-spacing: prepareMediaVariable(--_ctm-dn-dt-tt-lr-sg);
+                      text-align: start;
+                      text-transform: capitalize;
+                      @include restrictToLinesShow(1);
+                    }
+
+                    &.list__icon__v1 {
+                      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))
+                            )
+                          );
+                        }
+                      }
+                    }
+                  }
+                }
+
+                .srch__li__v1 {
+                  padding: 6px;
+                  position: var(--_p-sticky);
+                  top: 0;
+                  background: var(--_base-white);
+                  border-block-end: 1px solid var(--_gray-100);
+                  z-index: 2;
+                  flex-direction: column;
+                  & > input {
+                    border: 1px solid var(--_gray-300);
+                    //   box-shadow: var(--_shadow-xs);
+                    height: 32px;
+                    border-radius: 4px;
+                    font-size: 14px;
+                    padding-inline: 8px;
+                    color: var(--_gray-600);
+                  }
+                }
+              }
+            }
+          }
+
+          // Color Picker Changes
+          & > .clr__pkr__v2 {
+            display: var(--_d-flex);
+            align-items: center;
+            padding-block: 12px;
+
+            & > .color__btn__v2 {
+              display: var(--_d-flex);
+              --_sf-sz: 16px;
+              width: var(--_sf-sz);
+              height: var(--_sf-sz);
+              background: var(--_sf-clr-pkr-bg, #000);
+              border: 1px solid #555;
+              border-radius: 50%;
+              cursor: pointer;
+
+              &[title="no-color"] {
+                position: relative;
+                background: #555;
+                &::before {
+                  content: "";
+                  position: absolute;
+                  left: 50%;
+                  top: 50%;
+                  width: 100%;
+                  height: 1px;
+                  background: #fff;
+                  transform: translate(-50%, -50%) rotate(-45deg);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    & > .emb__tmp__footer {
+      display: var(--_d-flex);
+      height: var(--_sf-bm-ht);
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 8px 12px;
+
+      & > div {
+        display: var(--_d-flex);
+        align-items: center;
+        gap: 12px;
+
+        & > button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 6px 8px;
+
+          font-size: 12px;
+          text-transform: uppercase;
+          line-height: 20px;
+
+          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))
+            );
+          }
+
+          &.emb__save {
+            background: var(--_sf-prm-clr);
+            color: var(--_sf-scd-clr);
+            border: 1px solid var(--_sf-prm-clr);
+            justify-content: center;
+            @include spinnerStyles();
+
+            & > span {
+              display: var(--_d-flex);
+              visibility: var(--_sf-sv-sp-vs, visible);
+              opacity: var(--_sf-sv-sp-op, 1);
+            }
+          }
+
+          &.emb__cancel {
+            background: transparent;
+            color: var(--_sf-prm-clr);
+            // border: 1px solid var(--_sf-prm-clr);
+            border: 1px solid transparent;
+          }
+        }
+      }
+    }
+  }
+}