@use "sass:map";
@use "sass:list";
@import "./functions.scss";
$defaultValues: (
  --_flex-box: getListOfResponsive(flex, block),
  --_width: getListOfResponsive(calc(100% - 400px), 100%),
  --_width-400: getListOfResponsive(400px, 100%),
);

[data-div-type="element"] {
  &[data-element-type="myTemplates"] {
    // Was `width: 100% !important`, which ignored the percentage the right resize
    // handle writes and left the handle with nothing to drive.
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
      )
    );

    & > .wrapper {
      // Layout > Padding. The element declares it but nothing read it back.
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }

    // .accordion-element {
    //   background-color: var(
    //     --_ctm-mob-dn-fq-wt-bd-cr,
    //     var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
    //   );
    //   padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
    //   display: flex;
    //   flex-direction: column;
    //   --_sf-gp: var(
    //     --_ctm-mob-lt-im-sg,
    //     var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
    //   );
    //   --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
    //   row-gap: var(--_sf-gp);
    //   width: 100%;
    //   // height: 100%;
    //   border-color: var(
    //     --_ctm-mob-dn-fq-wt-br-cr,
    //     var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
    //   );
    //   border-style: var(
    //     --_ctm-mob-dn-fq-wt-br-se,
    //     var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
    //   );
    //   border-width: var(
    //     --_ctm-mob-dn-fq-wt-br-wh,
    //     var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
    //   );
    //   border-radius: var(
    //     --_ctm-mob-dn-fq-wt-br-rs,
    //     var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
    //   );
    //   box-shadow: var(
    //     --_show-shadow,
    //     var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
    //       var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
    //       var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
    //       var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
    //   );
    // }
  }

  .template_wrapper {
    width: 100%;
    .template_section {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      // h2 {
      //   font-size: 24px;
      // }
      .back_to_cart {
        color: var(--_thm-cs-tt-ls-as);
        &:hover {
          text-decoration: underline;
        }
      }
    }
    .template_body {
      @include prepareMediaQueries($defaultValues);
      display: var(--_flex-box, flex);
      // display: flex;
      gap: 60px;
      justify-content: space-between;
      .template_col_left {
        // width: calc(100% - 400px);
        width: var(--_width, 100%);
        // min-height: 400px;
        // background-color: var(--_base-white);
        .wishlist-modal {
          display: flex;
          flex-direction: column;
          width: 100%;

          .wishlist-modal-section {
            // padding: 16px 24px 24px 24px;
            gap: 16px !important;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;

            .form-group {
              display: flex;
              flex-direction: column;
              gap: 6px;
              max-width: 500px;

              // label {
              //   display: block;
              //   font-size: 0.875rem;
              //   font-weight: 500;
              //   color: #374151;
              // }

              .primary_text_label {
                font-weight: 700;
              }

              input[type="radio"],
              textarea {
                width: 100%;
                padding: 12px 14px;
                // font-size: 0.875rem;
                font-size: var(--_thm-ty-p1-ft-se);
                border: 1px solid var(--_thm-cs-be-se-3);
                border-radius: 6px;
                outline: none;
                box-sizing: border-box;
                transition: all 0.2s;

                &:focus {
                  border: 1px solid var(--_primary-300);
                  // outline: 1px solid color-mix(in srgb, var(--_primary-300) 50%, transparent);
                }

                &[type="radio"] {
                  width: fit-content;
                  height: fit-content;
                }
                &::placeholder {
                  color: var(--_thm-ty-p2-tt-cr);
                }
              }

              .radio-group {
                display: flex;
                flex-direction: column;
                gap: 12px;
                font-weight: normal;

                .radio-label {
                  display: inline-flex;
                  align-items: center;
                  gap: 8px;
                  cursor: pointer;
                  width: fit-content;

                  span {
                    color: var(--_thm-ty-p2-tt-cr);

                    span {
                      color: var(--_thm-ty-p1-tt-cr);
                      font-weight: 500;
                    }
                  }
                }
              }

              textarea {
                min-height: 100px;
                resize: vertical;
              }

              .global-can-edit {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                margin-left: 36px;
                margin-top: 6px;
                gap: 6px;

                input[type="checkbox"] {
                  margin: 0;
                  width: 16px;
                  height: 16px;
                  cursor: pointer;
                }

                span {
                  // font-size: 0.875rem;
                  // font-weight: 600;
                  // color: var(--_gray-900);
                  color: var(--_thm-ty-p1-tt-cr);
                  font-family: var(--_thm-ty-p1-ft-fy);
                  text-transform: var(--_thm-ty-p1-tt-tm);
                  word-wrap: var(--_thm-ty-p1-wd-wp);
                  word-break: var(--_thm-ty-p1-wd-bk);
                  font-size: var(--_thm-ty-p2-ft-se);
                  font-weight: var(--_thm-ty-p1-bd);
                  margin-left: -15px;
                }
              }
            }
            input[type="text"] {
              height: 40px;
              border: 1px solid var(--_thm-cs-be-se-3);
              font-size: var(--_thm-ty-p1-ft-se);
              border-radius: 6px;
              padding: 12px 14px;
              transition: all 0.2s ease;
              &:focus {
                border: 1px solid var(--_primary-300);
                // outline: 1px solid color-mix(in srgb, var(--_primary-300) 50%, transparent);
              }
            }
          }
        }
        .employee-row-wrapper {
          display: flex;
          flex-direction: column;
          gap: 12px;
          .employee-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;

            .employee_first_col {
              display: flex;
              width: 100%;
              gap: 16px;
              align-items: center;
              .dropdown {
                display: flex;
                flex-direction: column;
                gap: 6px;
              }

              // .dropdown {
              //   flex: 1;
              //   display: flex;
              //   flex-direction: column;
              //   gap: 8px;
              //   max-width: 400px;

              //   .quick-order-product-dropdown-section {
              //     &:focus {
              //       &:focus {
              //         border-color: #2563eb;
              //         box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
              //       }
              //     }

              //     .dropdown-input-section {
              //       // padding: 0.5rem;

              //       .input-field {
              //         border: none;
              //         box-shadow: none;
              //         padding: 0px;
              //       }

              //       .dropdown-menu {
              //         top: 40px;
              //       }
              //     }
              //   }
              // }

              .checkbox-wrapper {
                display: flex;
                align-items: center;
                flex-direction: column;
                gap: 0.5rem;
                white-space: nowrap;
                align-self: stretch;
                align-items: flex-start;

                .checkbox-container {
                  display: flex;
                  width: 3.5rem;
                  align-items: center;
                  flex: 1 1 auto;
                  justify-content: center;

                  input[type="checkbox"] {
                    width: 16px;
                    height: 16px;
                    border: 1px solid #d0d5dd;
                    border-radius: 4px;
                    position: relative;
                    background-color: #fff;
                    transition: all 0.2s ease;

                    &::after {
                      content: "";
                      position: absolute;
                      display: none;
                      left: 5px;
                      top: 0.5px;
                      width: 5px;
                      height: 10px;
                      border: solid #fff;
                      border-width: 0 2px 2px 0;
                      transform: rotate(45deg);
                    }
                  }
                }
              }
            }

            .delete-icon-wrapper {
              display: flex;
              align-items: center;
              flex-direction: column;
              gap: 0.5rem;
              white-space: nowrap;
              align-self: stretch;
              align-items: flex-start;
              // margin-left: 130px;

              .delete-icon-container {
                display: flex;
                width: 100%;
                align-items: center;
                flex: 1 1 auto;
                justify-content: center;

                .delete-icon {
                  cursor: pointer;
                  display: flex;
                  svg {
                    width: 24px;
                    height: 24px;
                    path {
                      stroke: #6b7280; // gray-500
                    }

                    &:hover {
                      path {
                        stroke: #ef4444;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .action-buttons {
          display: flex;
          gap: 1rem;
          align-items: center;
          // justify-content: flex-end;
          flex: 1 1 auto;
          // padding: 16px 24px;
          // border-top: 1px solid var(--_gray-200);
          gap: 12px;
          margin-top: 24px;
          padding-bottom: 24px;
          button {
            padding: 12px 16px;
            border-radius: 6px;
          }
          .create-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            background-color: var(--_thm-py-bs-dt-se-bd-cr);
            color: var(--_thm-py-bs-dt-se-tt-cr);
            &.disabled {
              opacity: 0.5;
              pointer-events: none;
            }
            .loader {
              animation: rotate-icon 1s linear infinite;
              display: inline-block;
              transform-origin: center;

              svg path {
                stroke: var(--_primary-200);
              }
            }

            &:hover {
              background-color: var(--_thm-py-bs-hr-se-bd-cr);
              color: var(--_thm-py-bs-hr-se-tt-cr);
            }
          }
          .discard-btn {
            &:hover {
              background-color: var(--_gray-50);
              color: var(--_gray-900);
            }
          }
        }
      }
      .template_col_right {
        // width: 400px;
        width: var(--_width-400, 100%);
        height: fit-content;
        // background-color: var(--_base-white);
        overflow: hidden;
        .template_summary_wrapper {
          border: 1px solid var(--_thm-cs-be-se-3);
          border-radius: 4px;
          width: 100%;
          .template_summary_header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--_thm-cs-be-se-3);
            font-size: 16px;
            font-weight: 600;
            background-color: #f5f5f5;
            border-radius: 4px 4px 0 0;
            color: var(--_thm-ty-p1-tt-cr);
          }
          .template_summary_body {
            .template_summary_items {
              padding: 16px;
              display: flex;
              flex-direction: column;
              gap: 8px;
              .template_summary_item {
                display: flex;
                justify-content: space-between;
                gap: 16px;
                .template_summary_item_details {
                  display: flex;
                  gap: 16px;
                  .template_summary_item_pro_info {
                    h5 {
                      font-size: var(--_thm-ty-p1-ft-se);
                      font-weight: var(--_thm-ty-p1-ft-wt);
                      color: var(--_thm-ty-p1-tt-cr);
                    }
                    .template_summary_item_pro_qty {
                      color: var(--_thm-ty-p3-cr);
                      font-size: var(--_thm-ty-p3-ft-se);
                      span {
                        display: block;
                      }
                      .qty {
                        color: var(--_thm-ty-p1-tt-cr);
                      }
                    }
                  }
                }
                .template_summary_item_detail_price {
                  font-size: var(--_thm-ty-p1-ft-se);
                  font-weight: var(--_thm-ty-p1-ft-wt);
                  color: var(--_thm-ty-p1-tt-cr);
                  white-space: nowrap;
                }
              }
              .no_data_selected_text {
                color: var(--_thm-ty-p1-tt-cr);
                font-size: var(--_thm-ty-p1-ft-se);
                font-weight: var(--_thm-ty-p1-ft-wt);
              }
            }
          }
        }
      }
    }
  }
}