@h-row: 50px;
.file-panel {
  width: 100%;
  margin-top: 10px;
  box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.1);
  > h2 {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
  }
  .file-list {
    position: relative;
    height: 360px;
    overflow-y: auto;
    background-color: rgb(250, 250, 250);
  }
  .file-item {
    position: relative;
    height: @h-row;
    line-height: @h-row;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    z-index: 1;
    > li {
      display: inline-block;
    }
  }
  .file-type {
    width: 24px;
    height: 24px;
    vertical-align: -5px;
  }
  .file-name {
    width: 40%;
    margin-left: 10px;
    .ivu-tooltip-popper {
      position: relative;
      z-index: 2;
    }
  }
  .file-size {
    width: 15%;
  }
  .file-status {
    width: 15%;
  }
  .file-operate {
    width: 20%;
    > a {
      font-size: 25px;
      padding: 10px 5px;
      cursor: pointer;
      color: #666;
      &:hover {
        color: #ff4081;
      }
    }
  }
  .file-type[icon="text"] {
    background: url(../../assets/icons/text-icon.png);
  }
  .file-type[icon="video"] {
    background: url(../../assets/icons/video-icon.png);
  }
  .file-type[icon="image"] {
    background: url(../../assets/icons/image-icon.png);
  }
  .file-type[icon="audio"] {
    background: url(../../assets/icons/audio-icon.png);
  }
  .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: @h-row - 1;
    width: 0;
    background-color: #e2edfe;
    z-index: -1;
  }
  .no-file {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
  }
}