@use "sass:map";
@use "sass:list";

$editorMain: ".flex__text__editor__main";
$editorWrapper: ".flx__txt__edt__wrapper";
$editor: '[contenteditable="true"]';
$suggestionsMain: ".flex__suggestions__box";
$textElement: '[data-element-type="text"]';
$textElementV2: '[data-custom-type="custom__text"]';
$dataBodyShowFalse: '[data-body-show="false"]';
$titleDiv: ".ttl__dv";
$bodyDiv: ".bd__dv";
$macroDiv: ".mcr__dv";
$macroChip: ".macro__chip__v2";
$previewMode: '[data-text-type="preview-mode"]';
$dataDecoded: '[data-decoded="true"]';
$dataDecodedV2: '[data-decoded-v2="true"]';
$editorIframe: '[data-iframe-body="true"]';
$width: 225px;
$height: 300px;

#{$textElement},
#{$textElementV2} {
  #{$editorMain} {
    position: var(--_p-relative);

    #{$editor} {
      word-wrap: break-word;
    }
    #{$suggestionsMain} {
      position: var(--_p-fixed);
      left: var(--_sf-lt-vl-sg);
      top: var(--_sf-tp-vl-sg);
      z-index: calc(var(--_higher-zIndex) + var(--_it-gl-zIndex) + 1);
      border: 1px solid var(--_gray-200);
      background: var(--_base-white);
      box-shadow: 0px 1px 6px -2px var(--_gray-300);
      border-radius: 6px;
      width: $width;
      max-height: var(--_sf-ht-vl-sg, $height);
      overflow-y: auto;
      transform: translateY(8px);

      & > ul {
        display: var(--_d-flex);
        flex-direction: column;
        width: 100%;

        & > li {
          display: var(--_d-flex);
          flex-direction: column;
          width: 100%;

          &#{$dataBodyShowFalse} {
            --_sf-db-bd-dp: var(--_d-none);
            --_sf-sv-ic-rt: -90deg;
          }

          & > div {
            &#{$titleDiv} {
              padding: 8px 12px 8px 12px;
              display: var(--_d-flex);
              justify-content: space-between;
              background-color: var(--_gray-50);
              cursor: pointer;
              border-bottom: 1px solid var(--_gray-200);
              gap: 10px;

              & > .left {
                display: var(--_d-flex);
                align-items: center;
                gap: 4px;

                & > span {
                  display: var(--_d-flex);
                  align-content: center;

                  &:nth-of-type(2) {
                    font-weight: 600;
                    font-size: 12px;
                    color: var(--_gray-600);
                  }
                  &:nth-of-type(1) {
                    svg {
                      width: 10px;
                      height: 10px;
                    }
                  }
                }
              }

              & > span {
                display: var(--_d-flex);
                align-items: center;
                transition: transform 0.45s ease;
                transform: rotate(var(--_sf-sv-ic-rt, 0deg));

                svg {
                  width: 10px;
                  height: 10px;
                }
              }
            }

            &#{$bodyDiv} {
              display: var(--_sf-db-bd-dp, var(--_d-flex));
              transition: display 0.45s ease;
              flex-wrap: wrap;
              gap: 8px;
              padding: 12px;

              & > div {
                &#{$macroDiv} {
                  margin: 1px;
                  background-color: var(--_sf-hr-cr, var(--_gray-100));
                  border-radius: 6px;
                  padding: 6px 10px;
                  color: var(--_gray-600);
                  font-size: 14px;
                  font-weight: 500;
                  max-width: 150px;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                  transition: all 0.2s ease-in-out;
                  cursor: pointer;

                  &:hover {
                    --_sf-hr-cr: var(--_primary-50);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
#{$macroChip}:is(#{$editorIframe} *, #{$dataDecodedV2}, #{$textElementV2} *) {
  @extend .macro_styles;
  user-select: all;
}

#{$macroChip}:not(#{$dataDecoded}, #{$dataDecodedV2}) {
  &:is(#{$previewMode} *) {
    @extend .macro_styles;
    position: var(--_p-relative);
    width: 62px;
    display: var(--_d-inline-flex);
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: clip;

    & > span {
      display: var(--_d-none);
    }
    &::before {
      font-size: 12px !important;
      color: var(--_primary-400) !important;
      content: "Loading";
    }

    &::after {
      content: "";
      // width: 6px;
      // height: 6px;
      // border: 1px solid var(--_primary-400);
      // border-top-color: var(--_primary-100);
      // border-radius: 50%;
      // animation: spin 2s linear infinite;

      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      position: var(--_p-absolute);
      animation: skeleton-shimmer 1.5s infinite cubic-bezier(0.02, 0.02, 1, 1.01);
    }

    @keyframes skeleton-shimmer {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  }
}
.macro_styles {
  background: var(--_primary-50);
  border-radius: 4px;
  display: inline-flex;
  padding-inline: 2px;
  & > span {
    color: var(--_primary-400) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

// Popup
.custom__attribute__popup__v2 {
  background: var(--_base-white);
  padding: 8px;
  border-radius: 4px;
  width: 200px;
  box-shadow: var(--_shadow-x3);
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  // transform: translate(50%, 50px);

  & > div {
    &.body__div {
      display: flex;
      flex-direction: column;
      gap: 6px;

      & > p {
        font-size: 12px;
        font-weight: 600;
        word-break: break-all;
        color: var(--_gray-900);
      }

      & > input {
        border: 1px solid var(--_gray-200);
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 12px;
        max-width: 100%;
        width: 100%;
      }
    }

    &.footer__div {
      display: flex;
      align-items: center;
      gap: 8px;

      & > button {
        display: flex;
        padding: 4px 8px;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 400;
        border-radius: 4px;

        &[data-type="submit"] {
          background: var(--_primary-500);
          color: #fff;
        }
      }
    }
  }
}