.upload-file {
  .jr-file-item {
    display: flex;
    flex-wrap: wrap;

    .draggable-box-wrap {
      display: flex;
      flex-wrap: wrap;

      &.is-draging {
        box-shadow: 0 0 0 5px $--color-c6 !important;
      }

      .shadow {
        top: -3px;
        right: -3px;
        position: absolute;
        width: calc(100% + 3px);
        height: calc(100% + 3px);
        z-index: 10;
        background: $--color-c6;

        &.has-name {
          height: calc(100% + 28px);
        }
      }
    }

    li {
      margin: 0 12px 30px 0;
      &.last-bank {
        margin-right: 0;
      }

      &:not(.jr-upload) {
        position: relative;

        .file-del-icon {
          position: absolute;
          @include center;
          cursor: pointer;
          top: -3px;
          right: -3px;
          width: 18px;
          height: 18px;
          border-radius: 9px;
          background-color: rgba($--color-c1, 0.7);
          z-index: 3;

          &:hover {
            background-color: $--color-c11;
          }

          i {
            color: $--color-c6;
          }
        }
      }

      .jr-file,
      &.jr-upload {
        background-color: $--color-c6;
        border: solid 1px $--color-c3;
        border-radius: $--border-radius-base;
      }

      &.jr-upload {
        cursor: pointer;
        border: dashed 1px $--color-c3;
        @include center;
        flex-direction: column;

        &:hover {
          border: solid 1px $--color-c9;

          /deep/ .jr-button-wrap {
            .jr-button {
              background-color: $--color-c9;
            }
          }
        }

        // 按钮组件样式
        /deep/ .jr-button-wrap {
          margin-bottom: 10px;
        }

        > span {
          line-height: 14px;
        }

        .upload-desc {
          color: $--color-c2;
          @include removeSpace($--font-xs);
          margin-top: 10px;
        }
      }

      &.not-file-name {
        margin-bottom: 20px;
      }

      .jr-file {
        position: relative;
        height: 100%;
        box-sizing: border-box;

        img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          max-width: 100%;
          max-height: 100%;
          -webkit-user-drag: none;
        }

        .j-video-mask {
          position: absolute;
          z-index: 1;
        }

        .jr-upload-err {
          cursor: pointer;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba($--color-c6, 0.9);
          @include center;

          i,
          p {
            color: $--color-c11;
          }

          i {
            position: absolute;
            left: -8px;
            top: 4px;
            text-indent: 0;
          }

          p {
            position: relative;
            margin-left: 8px;
            width: 66px;
            line-height: 22px;
            text-indent: 8px;
            font-size: $--font-xs;
          }
        }
      }

      .jr-file-name {
        padding-top: 6px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        span {
          @include removeSpace($--font-xs);
          color: $--color-c1;
        }
      }
    }

    .re-upload {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;

      &:hover {
        color: $--color-c8;
      }

      > i {
        position: absolute;
        left: 4px;
        top: 5px;
        font-size: $--font-l;
        color: $--color-c8;
      }

      /deep/ .jr-button-wrap {
        width: 91px;
        text-indent: 19px;

        .jr-button-plain {
          padding: 0;
          padding-right: 3px;
        }
      }
    }
  }
}