@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";
$mainWrapper: ".emb__main__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']";
$v1Child: "#{$mainWrapper}.v1 *";
$v2Child: "#{$mainWrapper}.v2 *";

$defaultValues: (
  --_sf-plp-flx-drt: getListOfResponsive(row, column),
  --_sf-prv-psn-vlu: getListOfResponsive(sticky, static),
  --_sf-prv-prt-gap: getListOfResponsive(32px, 12px),
  --_sf-prv-prt-gap-v2: getListOfResponsive(16px, 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%;

      &:is(#{$v2Child}) {
        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(---_sff-glyph-asfsdafdn, var(--_sf-prv-prt-gap));

        &:is(#{$v1Child}) {
          ---_sff-glyph-asfsdafdn: var(--_sf-prv-prt-gap-v2);
          flex-direction: column;
          user-select: none;
        }

        // Header
        & > #{$positionHeader} {
          display: var(--_d-flex);
          align-items: center;
          justify-content: space-between;
          gap: 8px;

          &:is(#{$v1Child}) {
            border-radius: 4px;
            --_perc-clr-bb: 85%;
            padding: 8px 12px;
            border: 0.5px solid
              color-mix(
                in srgb,
                var(--_sp-color-sadasd, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)})
                  calc(100% - var(--_perc-clr-bb)),
                transparent var(--_perc-clr-bb)
              );
          }

          & > 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-transform: prepareMediaVariable(--_ctm-dn-te-tt-tm);
              word-wrap: prepareMediaVariable(--_ctm-dn-te-wd-wp);
              word-break: prepareMediaVariable(--_ctm-dn-te-wd-bk);
              text-decoration: prepareMediaVariable(--_ctm-dn-te-ue);
              letter-spacing: prepareMediaVariable(--_ctm-dn-te-lr-sg);
              text-align: prepareMediaVariable(--_ctm-dn-te-tt-an);
            }

            &.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);
                }
              }
            }
          }
        }

        div {
          &:has(> .mandatory__label__v1) {
            display: var(--_d-flex);
            gap: 8px;
            justify-content: space-between;

            .tb__lvl__clearall {
              font-size: 14px;
              color: #666666;
              cursor: pointer;
            }
          }
        }

        .mandatory__label__v1 {
          font-size: 14px;
          color: #666666;
        }

        & > .emb__rght__v2 {
          display: var(--_d-flex);
          flex-direction: column;
          row-gap: 16px;
          width: 100%;
        }

        // Preview

        & > #{$previewMain} {
          width: 100%;
          display: var(--_d-flex);
          align-items: flex-start;
          justify-content: center;
          max-width: var(--_max--sakjdsfnjk, 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)
          );

          &:is(#{$v1Child}) {
            background: #f5f5f5;
            --_max--sakjdsfnjk: 100%;
          }
          padding: 8px;
          border-radius: 6px;

          flex-direction: column;
          row-gap: 6px;

          &:is(#{$v2Child}) {
            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;

            &:is(#{$v1Child}) {
              --_transparent_perc: 40%;
              // color: color-mix(
              //   in srgb,
              //   #fff calc(100% - var(--_transparent_perc)),
              //   transparent var(--_transparent_perc)
              // );
            }
          }

          & > .emb__prv__svg__div__v2 {
            display: var(--_d-flex);
            width: 100%;
            justify-content: center;
          }

          & > #{$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;

          &:is(#{$v1Child}) {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            scrollbar-width: none;

            & > button {
              flex: 0 0 max-content;
            }
          }

          & > button {
            min-height: 40px;
            display: var(--_d-flex);
            align-items: center;
            justify-content: center;
            padding: 4px 8px;
            border-radius: 4px;
            --_perc-clr-bb: 85%;
            // 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)
            //     )
            //   );
            border: 0.5px solid
              color-mix(
                in srgb,
                var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)})
                  calc(100% - var(--_perc-clr-bb)),
                transparent var(--_perc-clr-bb)
              );
            background: color-mix(in srgb, var(--_sp-color, transparent) 6%, transparent 94%);
            gap: 6px;

            & > .icn__spn {
              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);
                word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
                word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
                &.flex__overflow {
                  white-space: normal;
                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                }
                font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
                font-weight: var(--_fw-wt, prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400));
                line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
                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;
            }
          }

          .lbl__prn {
            display: var(--_d-flex);
            max-width: #{$maxWidth};
            align-items: center;
            gap: 8px;

            & > span {
              display: var(--_d-flex);
              cursor: pointer;
            }
          }

          label {
            color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
            font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-dt-tt-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
            font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
            font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
            font-weight: 500;
            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)
            //     )
            //   );
            border: 0.5px dashed
              color-mix(
                in srgb,
                var(
                  --_sp-iu-clr,
                  var(
                      --_ctm-mob-dn-dt-tt-cr,
                      var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
                    )
                    calc(100% - var(--_perc-clr-bb))
                ),
                transparent var(--_perc-clr-bb)
              );
            position: var(--_p-relative);
            cursor: pointer;

            &[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);
                    word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
                    word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
                    text-transform: uppercase;
                    line-height: 1;
                    color: var(--_sp-iu-clr);
                  }
                }
              }
            }

            & > 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: 85%;
            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)
            //     )
            //   );

            border: 0.5px solid
              color-mix(
                in srgb,
                #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)}
                  calc(100% - var(--_perc-clr-bb)),
                transparent var(--_perc-clr-bb)
              );
            background: var(--_sf-scd-clr);
            padding: 8px 12px;

            &: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);
              text-transform: prepareMediaVariable(--_ctm-dn-dt-tt-tt-tm);
              word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
              word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
              font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
              font-weight: var(--_fw-wt, prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400));
              line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
              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);
              text-transform: prepareMediaVariable(--_ctm-dn-dt-tt-tt-tm);
              word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
              word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
              font-size: 14px;
              line-height: 1.5;
            }
            ul {
              display: flex;
              flex-direction: column;
              row-gap: 6px;
              margin-inline-start: 16px;

              & > li {
                list-style-type: disc;

                font-size: 12px;
                color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
                font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
                text-transform: prepareMediaVariable(--_ctm-dn-dt-tt-tt-tm);
                word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
                word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
                font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
                line-height: 1.4;
              }
            }
          }

          // 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: 4px 8px;
                border-radius: 4px;
                --_perc-clr-bb: 85%;
                // 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)
                //     )
                //   );

                border: 0.5px solid
                  color-mix(
                    in srgb,
                    var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)})
                      calc(100% - var(--_perc-clr-bb)),
                    transparent var(--_perc-clr-bb)
                  );
                background: color-mix(in srgb, var(--_sp-color, transparent) 6%, transparent 94%);
                cursor: pointer;

                &: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);
                    word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
                    word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
                    font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
                    font-weight: var(--_fw-wt, prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400));
                    line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
                    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: 0.5px solid
                color-mix(
                  in srgb,
                  var(
                    --_fcs-clr,
                    var(
                        --_ctm-mob-dn-dt-tt-cr,
                        var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
                      )
                      calc(100% - var(--_perc-clr-bb)),
                    transparent var(--_perc-clr-bb)
                  )
                );
              border-radius: 6px;
              overflow: clip;
              background: var(--_sf-scd-clr);
              --_perc-clr-bb: 85%;

              & > span {
                display: var(--_d-flex);
                color: #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)};
                font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
                font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
                text-transform: prepareMediaVariable(--_ctm-dn-dt-tt-tt-tm);
                word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
                word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
                &.flex__overflow {
                  white-space: normal;
                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                }
                font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
                font-weight: prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400);
                line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
                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);
                      word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
                      word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
                      font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
                      font-weight: var(--_fw-wt, prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400));
                      line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
                      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;
          }
        }
      }
    }
  }
}