.pnt-image-wrapper {
  position: relative;

  .pnt-image-progress,
  .pnt-image-upload-progress {
    width: 136px;
    height: 136px;
    display: flex;
    align-items: center;
    justify-content: center;

    .pnt-image-loading {
      width: 100%;
      height: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-radius: 4px;
      background-color: #f7f8fa;

      svg {
        color: var(--td-brand-color);
        font-size: 24px;
      }

      p {
        margin-top: 4px;
        color: #808191;
        font-size: 12px;
      }
    }
  }

  .pnt-image {
    width: 136px;
    height: 136px;

    .pnt-image-mask {
      background: rgba(0, 0, 0, 60%);
      color: #fff;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      // 纯预览模式：半透明遮罩，鼠标手型
      &--basic {
        cursor: pointer;
      }

      // 上传预览模式：分隔线
      .pnt-image-divider {
        margin: 0 var(--td-comp-margin-l);
        border-left: 1px var(--td-text-color-anti) solid;
        height: var(--td-comp-size-xxxs);
      }
    }
  }
}