@import '../mixins/mixins.less';

.b(ap-upload-picture, {
  .picture-context {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(auto-fill, 100px);
    user-select: none;

    .picture-upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100px;
      overflow: hidden;
      transition: all 0.2s;
      border: 1px dashed #dee4ed;
      border-radius: 4px;
      background: #f2f6f9;
      color: #abb7cc;
      font-size: 16px;
      cursor: pointer;
      aspect-ratio: 1 / 1;

      &>*+* {
        margin-top: 8px;
        font-size: 14px;
      }

      &:hover {
        border: 1px dashed #0070ff;
      }
    }

    .picture-item {
      width: 100px;
      padding: 8px;
      overflow: hidden;
      border: 1px solid #dee4ed;
      border-radius: 4px;
      background: #fff;
      aspect-ratio: 1 / 1;

      .picture-item-box {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 2px;

        &>img {
          width: 100%;
          height: 100%;
          border-radius: 2px;
          object-fit: cover;
        }

        &:hover>.picture-item-shadow {
          display: block !important;
        }

        .picture-item-shadow {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 2px;
          background: rgb(0 0 0 / 50%);
          color: #fff;
          font-size: 14px;

          .picture-item-close {
            display: flex;
            position: absolute;
            top: 0;
            right: 0;
            align-items: center;
            justify-content: center;
            width: 16px;
            overflow: hidden;
            transform: translate(30%, -30%);
            border: 1px solid #fff;
            border-radius: 50%;
            background: #ff4d4f;
            color: #fff;
            font-size: 10px;
            cursor: pointer;
            aspect-ratio: 1 / 1;
          }

          .picture-item-uploading {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 84%;
            transform: translate(-50%, -50%);
            text-align: center;
          }
        }
      }
    }
  }

  .picture-title {
    margin-top: 8px;
    color: #8896b0;
    font-size: 14px;
  }
});

.b(ap-upload-picture-admin, {
  .picture-context {
    .picture-upload {
      border: 1px dashed #d9d9d9;
      background: #fafafa;
      color: #bfbfbf;

      &:hover {
        border: 1px dashed #34b77c;
      }
    }

    .picture-item {
      border: 1px solid #d9d9d9;
    }
  }
  
  .picture-title {
    color: #999;
  }
});