.custom-markdown {
  &-con,
  &-previewCon {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    > span:nth-child(1) {
      margin-bottom: 9px;
      color: rgb(201 201 201 / 50%) !important;
      font-size: 32px !important;
    }
  }

  &-previewCon {
    > span:nth-child(1) {
      margin-bottom: 32px;
      color: rgb(201 201 201 / 50%) !important;
      font-size: 108px !important;
    }
  }

  &-rcImg.hovered {
    border: 3px solid var(--wanx-brand-high-light) !important;
  }

  &-rcImg {
    position: relative;

    &.notAllowed {
      cursor: not-allowed;
    }
  }

  &-hovered {
    opacity: 1 !important;
  }

  &-rect {
    width: calc(24% - 9px);
    aspect-ratio: 1 / 1 !important;
  }

  &-horizontal {
    width: calc(24% - 9px);
    aspect-ratio: 16 / 9 !important;
  }

  &-vertical {
    width: calc(24% - 9px);
    aspect-ratio: 9 / 16 !important;
    // height: calc(24% * 9 / 16)!important;
  }

  &-previewImg {
    max-height: calc(100vh - 2 * (60px + 40px + 24px)) !important;
  }

  &-skeleton {
    position: absolute;
    top: -3px;
    left: -3px;
    z-index: 104;
    display: block;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    border: 3px solid #070c14;
    pointer-events: none;

    &.hide {
      display: none;
    }

    :global {
      .ant-skeleton-avatar.ant-skeleton-avatar-lg.ant-skeleton-avatar-square {
        width: 100%;
        height: 100%;
        background-color: var(--wanx-ge-10);

        &::after {
          background: linear-gradient(
            90deg,
            rgb(20 24 34 / 20%) 0%,
            rgb(20 24 34 / 20%) 30%,
            rgb(45 50 64 / 60%) 37%,
            rgb(20 24 34 / 20%) 34%,
            rgb(20 24 34 / 20%) 100%
          );
        }
      }
    }
  }
}

.custom-markdown-mobile {
  &-count {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 120px;
    color: rgb(242 246 255 / 70%);
    font-size: 32px;
    line-height: 120px;
    text-align: center;
  }

  &-toolItem {
    :global {
      .rc-image-preview-operations-icon {
        font-size: 48px !important;
      }
    }
  }

  &-options {
    align-items: center;
    justify-content: flex-start !important;
    width: 100%;
    height: 120px;
    margin: 0 !important;
    padding-left: 40px !important;
  }

  &-page {
    position: fixed;
    bottom: 224px;
    left: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    &-pageItem {
      width: 40px;
      height: 12px;
      margin-right: 20px;
      background: rgb(242 246 255 / 30%);
      backdrop-filter: blur(10px);

      &:nth-last-child(1) {
        margin: 0;
      }
    }

    &-activeItem {
      background: #f2f6ff;
    }
  }

  .imgWrapper {
    border: 1px solid rgb(255 255 255 / 10%);

    :global {
      .swiper-slide {
        width: 100% !important;
      }
    }
  }

  .rcImg {
    box-sizing: border-box !important;
    // border: 3px solid transparent !important;
    // &.hovered {
    //   border: 3px solid var(--wanx-brand-high-light) !important;
    // }
  }

  .previewImg {
    max-width: 100% !important;
    pointer-events: none;
    // z-index: 105;
    // position: absolute!important;
    // max-height: calc(100vh - 340px) !important;
  }

  .con,
  .previewCon {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    > span:nth-child(1) {
      margin-bottom: 18px;
      color: rgb(201 201 201 / 50%) !important;
      font-size: 64px !important;
    }
  }

  .previewCon {
    > span:nth-child(1) {
      margin-bottom: 64px;
      color: rgb(201 201 201 / 50%) !important;
      font-size: 216px !important;
    }
  }

  .skeleton {
    position: absolute;
    z-index: 99;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;

    &.hide {
      display: none;
    }

    :global {
      .ant-skeleton-avatar.ant-skeleton-avatar-lg.ant-skeleton-avatar-square {
        width: 100%;
        height: 100%;
        background-color: var(--wanx-ge-10);

        &::after {
          background: linear-gradient(
            90deg,
            rgb(20 24 34 / 20%) 0%,
            rgb(20 24 34 / 20%) 30%,
            rgb(45 50 64 / 60%) 37%,
            rgb(20 24 34 / 20%) 34%,
            rgb(20 24 34 / 20%) 100%
          );
        }
      }
    }
  }
}
