@sc-360-v2/storefront-cms-library 0.4.49 → 0.4.51

package/dist/embroider-template-1.scss

@@ -1,482 +1,482 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-@use "./embroider-preview-element.scss" as *;
-
-$tmpWrapper: ".emb__tmp__wrapper";
-$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";
-
-@mixin EmbroideryTemplate1Styles() {
-  & > #{$tmpWrapper} {
-    & > #{$paListParent} {
-      display: var(--_d-flex);
-      flex-direction: column;
-      row-gap: 16px;
-      width: 100%;
-      & > #{$pacListParent} {
-        display: var(--_d-flex);
-        flex-direction: column;
-        row-gap: 16px;
-
-        // 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);
-                }
-              }
-            }
-          }
-        }
-
-        // Preview
-
-        & > #{$previewMain} {
-          width: 100%;
-          display: var(--_d-flex);
-          align-items: flex-start;
-          justify-content: center;
-          // --_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,
-            #000 calc(100% - var(--_alpha)),
-            transparent var(--_alpha)
-          );
-          padding: 8px;
-          border-radius: 6px;
-
-          flex-direction: column;
-          row-gap: 6px;
-
-          & > .emb__preview__title {
-            // color: color-mix(in srgb, #fff 70%, transparent 30%);
-            --_alpha: 15%;
-            color: color-mix(in srgb, #000 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: column;
-          row-gap: 6px;
-
-          & > 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 {
-            background: var(--_gray-100);
-            height: 100px;
-            width: 100%;
-            border-radius: var(--_br-6);
-            border: 1px dashed var(--_primary-100);
-            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%);
-                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;
-                cursor: pointer;
-                visibility: var(--_sf-vt-im, visible);
-                opacity: var(--_sf-op-im, 1);
-              }
-            }
-
-            & > input {
-              &[type="file"] {
-                position: var(--_p-absolute);
-                inset: 0 0 0 0;
-                opacity: 0;
-                height: 100%;
-              }
-            }
-          }
-
-          // 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: #fff;
-            padding: 8px 12px;
-
-            &: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;
-              }
-            }
-          }
-
-          // 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;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+@use "./embroider-preview-element.scss" as *;
+
+$tmpWrapper: ".emb__tmp__wrapper";
+$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";
+
+@mixin EmbroideryTemplate1Styles() {
+  & > #{$tmpWrapper} {
+    & > #{$paListParent} {
+      display: var(--_d-flex);
+      flex-direction: column;
+      row-gap: 16px;
+      width: 100%;
+      & > #{$pacListParent} {
+        display: var(--_d-flex);
+        flex-direction: column;
+        row-gap: 16px;
+
+        // 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);
+                }
+              }
+            }
+          }
+        }
+
+        // Preview
+
+        & > #{$previewMain} {
+          width: 100%;
+          display: var(--_d-flex);
+          align-items: flex-start;
+          justify-content: center;
+          // --_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,
+            #000 calc(100% - var(--_alpha)),
+            transparent var(--_alpha)
+          );
+          padding: 8px;
+          border-radius: 6px;
+
+          flex-direction: column;
+          row-gap: 6px;
+
+          & > .emb__preview__title {
+            // color: color-mix(in srgb, #fff 70%, transparent 30%);
+            --_alpha: 15%;
+            color: color-mix(in srgb, #000 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: column;
+          row-gap: 6px;
+
+          & > 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 {
+            background: var(--_gray-100);
+            height: 100px;
+            width: 100%;
+            border-radius: var(--_br-6);
+            border: 1px dashed var(--_primary-100);
+            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%);
+                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;
+                cursor: pointer;
+                visibility: var(--_sf-vt-im, visible);
+                opacity: var(--_sf-op-im, 1);
+              }
+            }
+
+            & > input {
+              &[type="file"] {
+                position: var(--_p-absolute);
+                inset: 0 0 0 0;
+                opacity: 0;
+                height: 100%;
+              }
+            }
+          }
+
+          // 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: #fff;
+            padding: 8px 12px;
+
+            &: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;
+              }
+            }
+          }
+
+          // 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;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}