@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-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);
                }
              }
            }
          }
        }

        // 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);
                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: column;
          row-gap: 6px;

          & > 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 {
            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);
                word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
                word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
                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);
              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;
              }
            }
          }

          // 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);
                    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;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}