@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;

@mixin flexbox($justify: center, $align: center, $gap: 0) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  gap: $gap;
}

.cfrm__modal {
  &__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
    animation: fadeIn 0.4s forwards;
    cursor: auto;
  }

  &__container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--_base-white);
    width: var(--_sf-ml-wh, 450px);
    max-width: min(75%, 850px);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
    cursor: auto;
  }

  &__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    padding: 16px 24px;

    h2 {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
      color: var(--_thm-ty-h2-ft-se);
    }

    p {
      font-size: 14px;
      color: var(--_thm-cs-tt-by-tt);
      margin-top: 12px;
    }

    &__close__btn {
      width: 24px;
      height: 24px;
      font-size: 14px;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      margin-top: -16px;
      margin-right: -16px;
      span {
        display: flex;
        svg {
          width: 20px;
          height: 20px;
        }
      }

      &:hover {
        background-color: var(--_gray-100);
      }
    }
  }

  &__body {
    font-size: 14px;
    color: var(--_gray-900);
    padding-inline: 24px;
  }

  &__footer {
    @include flexbox(flex-end, center, 10px);
    flex-wrap: wrap;
    bottom: 0;
    width: 100%;
    padding: 24px;
  }
  .modal-footer-wrapper {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    gap: 12px;

    .wishlist_button_wrapper {
      position: relative;
      // width: 100%;
      .wishlist_btn {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--_thm-py-bs-dt-se-tt-cr);
        height: 100%;
        &:hover {
          text-decoration: underline;
          color: var(--_thm-py-bs-hr-se-tt-cr);
        }
      }
      .wishlist_list_overlay {
        position: absolute;
        z-index: 10;
        top: 44px;
        left: 41px;
        min-height: 80px;
        max-height: 190px;
        width: 250px;
        overflow-y: auto;
        border-radius: 4px;
        background-color: var(--_base-white);
        box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.1);
        border: 1px solid var(--_gray-200);

        .empty_message {
          height: 200px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 24px;
          font-size: 16px;
          font-weight: 500;
          text-align: center;
          .dots {
            display: inline-flex;
            width: 20px;
            justify-content: space-between;
            align-items: flex-end;
            margin-left: 6px;
            margin-bottom: -9px;
          }

          .dots span {
            animation: blink 1.5s infinite;
            opacity: 0;
            width: 2px;
            height: 2px;
            border-radius: 50%;
            background-color: var(--_gray-700);
          }

          .dots span:nth-child(1) {
            animation-delay: 0s;
          }
          .dots span:nth-child(2) {
            animation-delay: 0.3s;
          }
          .dots span:nth-child(3) {
            animation-delay: 0.6s;
          }

          @keyframes blink {
            0% {
              opacity: 0;
            }
            50% {
              opacity: 1;
            }
            100% {
              opacity: 0;
            }
          }
        }
        .wishlist_overlay_header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px;
          font-size: 14px;
          font-weight: 600;
        }
        .wishlist_list_items {
          display: flex;
          flex-direction: column;

          .wishlist_item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--_gray-700);
            padding: 12px;
            border-radius: 4px;
            cursor: pointer;
            position: relative;
            margin: 4px;
            &.active {
              color: var(--_primary-400);
            }

            &:not(:last-child) {
              margin-bottom: 2px;
            }

            &:hover {
              background-color: var(--_primary-25);
              color: var(--_primary-400);
            }

            input {
              display: none;
            }

            .custom_checkbox {
              width: 18px;
              height: 18px;
              border: 2px solid var(--_gray-400);
              border-radius: 4px;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              transition: all 0.2s ease-in-out;
              background-color: #fff;

              &::after {
                content: "";
                width: 8px;
                height: 4px;
                border-left: 2px solid #fff;
                border-bottom: 2px solid #fff;
                transform: rotate(-45deg);
                opacity: 0;
                transition: opacity 0.2s ease-in-out;
                margin-bottom: 4px;
              }
            }

            input:checked + .custom_checkbox {
              background-color: var(--_primary-400);
              border-color: var(--_primary-400);

              &::after {
                opacity: 1;
              }
            }

            .label_text {
              font-size: 14px;
              font-weight: 500;
            }
          }
        }

        .wishlist_overlay_footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px;
          font-size: 14px;
          font-weight: 600;
          border-top: 1px solid var(--_gray-200);

          .btn {
            padding: 8px 12px;
            width: 100%;
            border-radius: 4px;
            text-align: center;
            font-weight: 500;
            text-decoration: none !important;
            &.primary {
              background-color: var(--_primary-400);
              color: var(--_base-white);
              font-size: 14px;
            }
            &.secondary {
              color: var(--_gray-700);
              &:hover {
                color: var(--_gray-900);
                background-color: var(--_gray-100);
              }
            }
          }
        }

        .no_wishlist,
        .loading_state {
          min-height: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          font-weight: 700;
          color: var(--_gray-700);
        }
      }
    }

    .modal-footer-secondary-btn {
      padding: 12px 0;
      border-radius: 4px;
      background-color: var(--_thm-sy-bs-dt-se-bd-cr);
      color: var(--_thm-sy-bs-dt-se-tt-cr);
      font-family: var(--_thm-py-bs-dt-se-ft);
      border: 1px solid var(--_thm-sy-bs-dt-se-br-cr);
      font-weight: var(--_thm-sy-bs-dt-se-bd);
      font-size: var(--_thm-sy-bs-dt-se-ft-se);
      // width: 100%;
      min-width: 150px;
      display: flex;
      justify-content: center;
      &:hover {
        background-color: var(--_thm-sy-bs-hr-se-bd-cr);
        color: var(--_thm-sy-bs-hr-se-tt-cr);
        border: 1px solid var(--_thm-sy-bs-hr-se-br-cr);
        text-decoration: var(--_thm-sy-bs-hr-se-ue);
      }
    }

    .modal-footer-danger-btn {
      padding: 12px 0;
      border-radius: 4px;
      background-color: var(--_thm-py-bs-dt-se-bd-cr);
      color: var(--_thm-py-bs-dt-se-tt-cr);
      font-weight: var(--_thm-py-bs-dt-se-bd);
      font-size: var(--_thm-py-bs-dt-se-ft-se);
      // width: 100%;
      display: flex;
      // border: 1px solid #d92d20;
      justify-content: center;
      align-items: center;
      min-width: 150px;
      font-family: var(--_thm-py-bs-dt-se-ft);
      span {
        svg {
          width: 22px;
          height: 22px;
          stroke: var(--_thm-py-bs-dt-se-tt-cr);
        }
      }

      &:hover {
        background-color: var(--_thm-py-bs-hr-se-bd-cr);
      }

      &:disabled {
        opacity: 0.7;
        cursor: not-allowed;
      }
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}