@-webkit-keyframes rotating {
  0% {
    -webkit-transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}


.mods-com-importfile {
  .mods-com-importfile-container {
    top: -150px;
    width: 520px;
    height: 130px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 12px 2px rgba(68, 73, 77, 0.16);
  }

  .mods-com-importfile-header {
    display: flex;
    width: 100%;
    height: 64px;
    margin-right: 16px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    border-bottom: 1px solid #e0dddd;
    align-items: center;

    .mods-com-importfile-title {
      display: flex;
      align-items: center;
      margin: 0 20px;
      flex: 1;

      &.mods-com-importfile-running {
        img {
          animation: rotating 1.2s linear infinite;
        }
      }

      img {
        width: 32px;
        height: 32px;
        margin-right: 16px;
      }
    }

    .mods-com-importfile-close {
      img {
        width: 23px;
        object-fit: contain;
        margin-right: 18px;
        cursor: pointer;
      }
    }
  }

  .mods-com-importfile-content {
    width: 100%;
    height: calc(100% - 64px);
    padding: 0 20px;

    .mods-com-importfile-info {
      display: flex;
      align-items: center;
      width: 100%;
      height: calc(100% - 2px);

      img {
        height: 28px;
        object-fit: contain;
        margin-right: 16px;
      }

      .mods-com-importfile-name {
        width: 0;
        flex: 1;
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mods-com-importfile-stepvalue {
        font-size: 12px;
        color: #ccc;
      }
    }

    .mods-com-importfile-step {
      bottom: 0;
      height: 2px;
      background: linear-gradient(to left, #40a8ff, #1e6fff);
    }
  }
}
