@import "../../../styles/vars.scss";

$upload-size: 108px;
.el-error {
  color: red;
}
.honjo-upload {
  
  .el-upload.el-upload--picture-card {
    height: $upload-size;
    width: $upload-size;
    line-height: $upload-size;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    height: $upload-size !important;
    width: $upload-size !important;
  }

  .honjo-upload__content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;

    .el-progress {
      display: block !important;
      position: static !important;
      transform: none !important;
      width: auto !important;
    }

    .honjo_upload__title {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0 8px;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      color: #fff;
      z-index: 0;
      border-radius: 0 0 4px 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .el-upload__tip {
    line-height: 16px;
  }

  &.honjo-upload--disabled {
    .el-upload.el-upload--text {
      display: none;
    }
  }
}

.honjo-upload.honjo-upload--disabled {
  .el-upload--picture-card {
    display: none !important;
  }
}

.honjo-upload--inline {
  .el-upload-list {
    display: flex;
    flex-wrap: wrap;

    &>.el-upload-list__item {
      margin: 5px;
      width: unset;
      margin-right: 24px;
    }
  }
}