@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
// @use "./embroider-template-1.scss" as *;
@use "./embroider-template-1-v2.scss" as *;

$mainWrapper: ".emb__main__wrapper";
$libraryWrapper: ".emb__library__wrapper";
$embBtn: ".emb__config__btn";
$embBtnIcon: ".emb__cnf__icn";
$embBtnText: "[data-type='text']";
$embBtnDesc: "[data-type='descc']";
$embTxtMainSpan: ".emb__cfg__txt__spn";
$apiLoader: '[data-spinner-state="loading"]';

@mixin spinnerStylesV2() {
  &::before {
    content: "";
    position: var(--_p-absolute);
    --_sz-vl: 10px;
    width: var(--_sz-vl);
    height: var(--_sz-vl);
    display: var(--_d-flex);
    right: 12px;
    top: 50%;
    border-radius: 50%;
    border: 0.25rem solid
      color-mix(
        in srgb,
        var(--_sf-bd-cr-e, #{prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-bd-cr)}) 65%,
        var(--_sf-fnt-clr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-cr)) 35%
      );
    border-top-color: var(--_sf-fnt-clr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-cr));
    animation: circlerotateV2 2s ease-in-out infinite forwards;
  }

  @keyframes circlerotateV2 {
    from {
      transform: translate(0%, -50%) rotate(0deg);
    }
    to {
      transform: translate(0%, -50%) rotate(360deg);
    }
  }
}

[data-div-type="element"] {
  &[data-element-type="embroidery"] {
    & > .wrapper {
      width: 100%;
      min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
      padding: prepareMediaVariable(--_ctm-lt-pg);
      border-radius: prepareMediaVariable(--_ctm-dn-ey-cr-br-rs);
      background-color: prepareMediaVariable(--_ctm-dn-ey-cr-bd-cr);

      display: var(--_d-flex) !important;
      flex-direction: column;
      row-gap: 16px;

      &[data-show-border="true"] {
        border-color: prepareMediaVariable(--_ctm-dn-ey-cr-br-cr);
        border-style: prepareMediaVariable(--_ctm-dn-ey-cr-br-se);
        border-width: prepareMediaVariable(--_ctm-dn-ey-cr-br-wh);
      }

      &[data-show-boxshadow="true"] {
        box-shadow: prepareMediaVariable(--_ctm-dn-ey-cr-sw-ae)
          prepareMediaVariable(--_ctm-dn-ey-cr-sw-br) prepareMediaVariable(--_ctm-dn-ey-cr-sw-sd)
          prepareMediaVariable(--_ctm-dn-ey-cr-sw-cr);
      }
      // Config Button
      & > #{$embBtn} {
        display: var(--_d-flex);
        justify-content: var(--_ctm-lt-at, space-between);
        align-items: flex-start;
        gap: var(--_ctm-lt-gp);
        padding: prepareMediaVariable(--_ctm-lt-bn-pg);
        border-radius: var(--_sf-br-rs, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-br-rs));
        background-color: var(--_sf-bd-cr-e, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-bd-cr));

        &[data-icon-position="left"] {
          flex-direction: row-reverse;
        }

        &:hover {
          --_sf-br-rs: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-br-rs)};
          --_sf-bd-cr-e: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-bd-cr)};

          --_sf-br-cr: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-br-cr)};
          --_sf-br-st: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-br-se)};
          --_sf-br-wt: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-br-wh)};

          --_sf-bx-xy: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-sw-ae)};
          --_sf-bx-br: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-sw-br)};
          --_sf-bx-sd: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-sw-sd)};
          --_sf-bx-cr: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-sw-cr)};

          --_sf-icn-sz: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-in-se)};
          --_sf-icn-cr: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-in-c1)};

          --_sf-fnt-fmy: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ft-fy)};
          --_sf-fnt-sz: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ft-se)};
          --_sf-fnt-clr: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-cr)};
          --_sf-fnt-wet: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ft-wt)};
          --_sf-fnt-td: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ue)};
          --_sf-fnt-sty: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ft-se-ic)};
          --_sf-fnt-lts: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-lr-sg)};
          --_sf-fnt-lht: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-le-ht)};
          --_sf-fnt-ta: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-tt-an)};
        }

        &[data-show-shadow="true"] {
          border-color: var(--_sf-br-cr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-br-cr));
          border-style: var(--_sf-br-st, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-br-se));
          border-width: var(--_sf-br-wt, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-br-wh));
        }

        &[data-show-border="true"] {
          box-shadow: var(--_sf-bx-xy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-sw-ae))
            var(--_sf-bx-br, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-sw-br))
            var(--_sf-bx-sd, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-sw-sd))
            var(--_sf-bx-cr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-sw-cr));
        }

        &[data-show-icon="false"] {
          --_sf-btn-icn-dp: var(--_d-none);
        }

        &[data-state="open"] {
          --_sf-rt-icn-vl: -90deg;
        }
        &#{$apiLoader} {
          --_sf-btn-icn-dp: var(--_d-none);
          position: var(--_p-relative);

          @include spinnerStylesV2();
        }

        & > span {
          &#{$embTxtMainSpan} {
            display: var(--_d-flex);
            width: 100%;
            flex-direction: column;
            row-gap: 6px;

            & > #{$embBtnText},
            & > #{$embBtnDesc} {
              display: var(--_d-flex);
              width: 100%;

              font-family: var(--_sf-fnt-fmy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-fy));
              text-transform: var(--_sf-fnt-fmy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-tt-tm));
              word-wrap: var(--_sf-fnt-fmy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-wd-wp));
              word-break: var(--_sf-fnt-fmy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-wd-bk));
              &.flex__overflow {
                white-space: normal;
                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
              }
              font-size: var(--_sf-fnt-sz, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-se));
              font-weight: var(--_sf-fnt-wet, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-wt));
              font-style: var(--_sf-fnt-sty, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-se-ic));
              color: var(--_sf-fnt-clr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-cr));
              letter-spacing: var(--_sf-fnt-lts, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-lr-sg));
              line-height: var(--_sf-fnt-lht, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-le-ht));
              text-decoration: var(--_sf-fnt-td, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ue));
              text-align: var(--_sf-fnt-ta, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-tt-an));
            }

            & > #{$embBtnDesc} {
              &,
              * {
                &:not(b, strong) {
                  font-weight: 400;
                }
                font-size: min(
                  #{prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal)},
                  var(--_sf-fnt-sz, #{prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-se)})
                );
                color: #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)};
                line-height: 1.5;
                text-align: start;
              }
            }
          }
          &#{$embBtnIcon} {
            display: var(--_sf-btn-icn-dp, var(--_d-flex));
            transition: transform 0.45s ease-in-out;
            transform: rotate(var(--_sf-rt-icn-vl, 0deg));

            svg {
              width: var(--_sf-icn-sz, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-in-se));
              height: var(--_sf-icn-sz, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-in-se));

              path {
                stroke: var(--_sf-icn-cr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-in-c1));
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-se-wh, 1.25);
              }
            }
          }
        }
      }

      .message {
        font-size: 14px;
        padding: 12px 16px;
        border-radius: 8px;
        display: inline-block;
        animation: fadeIn 0.3s ease-in-out;
      }
      .message.info {
        background-color: #eff6ff;
        color: #1e40af;
        border: 1px solid #bfdbfe;
      }

      // Playground
      & > #{$mainWrapper} {
        &.v2 {
          position: var(--_p-fixed);
          inset: 0 0 0 0;
          z-index: calc(99999 + 25);
          --_alpha: 40%;
          background: color-mix(
            in srgb,
            var(--_base-black) calc(100% - var(--_alpha)),
            transparent var(--_alpha)
          );
        }
        & > #{$libraryWrapper} {
          &:is(#{$mainWrapper}.v2 *) {
            position: var(--_p-absolute);
            background: var(--_white-v2);
            border-radius: 8px;
            width: min(960px, 95%);
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            // min-height: 250px;
            height: calc(100dvh - (2 * (24px)));
          }
          @include EmbroideryTemplate1StylesV2();
        }
      }
    }
  }
}