.blockContainer {
  @apply relative;
  :global{
    .divider-container{
      @apply absolute inset-x-2 z-10;
      &.before{
        top:-12px;
      }
      &.after{
        bottom: -10px;
      }
      .ant-divider-horizontal{
        margin: 0;
        border-block-start: 1px rgba(5, 5, 5,0.1);
      }
    }
    .article-action-add{
      @apply text-gray-600  text-sm inline-block bg-[#cce2ff] w-[80px] justify-center flex rounded-xl cursor-pointer hover:bg-blue-300 hover:text-white;
    }
  }
}
.blockInner{
  @apply flex px-4 py-10 hover:bg-[#e6ebf1] ;
}
.blockFooter{}
.block {
  @apply flex-1;
  &:last-child {
    @apply mb-0;
  }

  .blockBody {
    @apply flex flex-col gap-3
  }
}

.blockFist {
  @apply p-0 border-0 !important;
}

.blockItem {

}

.group {
  @apply flex gap-4;
  :global{
    .area-title{
      @apply text-gray-400 text-sm text-gray-800;
    }
    .digital-person{
      width: 450px;
    }
    .panel{
      @apply flex flex-col;
    }
    .panel-body{
      @apply bg-[#f0f0f0] flex-1 rounded-xl mt-2;
    }
  }
}

.imagerOrText{
  @apply bg-[#f8f8f8] rounded-xl py-2;
}
.imageList {
  @apply grid grid-cols-4 imagerOrText px-2 gap-2;
  :global {
    .ant-upload-wrapper {
      display: block;
      border: none;
      padding: 0;
    }

    .ant-upload {
      display: block;
    }

    img {
      @apply block m-0;
      max-width: 100%;
      height: 100px;
      object-fit: contain;
      padding: 2px;
    }
  }
}

.image {
  @apply rounded bg-gray-100;
  height: 100px;

  &:hover {
    @apply border-blue-500;
  }
}
.imageDelete{
  @apply absolute flex items-center justify-center right-0 top-0 w-[22px] h-[22px] rounded-full cursor-pointer z-10 ;
  font-size: 16px;
}
.uploadImage {
  @apply flex justify-center items-center relative h-[100px] text-gray-400;

  .uploadTips {
    @apply absolute inset-0 cursor-pointer opacity-0 transition rounded flex items-center justify-center bg-black/50 text-white;
  }

  .imagePlaceholder {
    @apply flex items-center justify-center;
    height: 100px;
  }

  &:hover {
    @apply bg-gray-100 cursor-pointer rounded  text-blue-500;
    .uploadTips {
      @apply opacity-100;
    }
  }
}

.text {
  @apply imagerOrText overflow-hidden flex-1 rounded focus:border-blue-200 transition;
  &:hover {
    @apply border-blue-500;
  }
  :global{
    .ant-input{
      @apply px-4;
    }
  }
}

.textarea {
  @apply border-0
}