.igloo-upload {
  // margin-bottom: 2px;
  .igloo-upload-box {
    &:hover {
      border-color: #d9d9d9 !important;
    }

    & > .ant-upload {
      background: #ffffff !important;

      .ant-upload-btn {
        padding: 24px 24px;
      }
    }

    .igloo-upload-box-center {
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;

      .igloo-upload-placeholder {
        white-space: pre-wrap;

        .igloo-upload-box-center-upload-icon {
          margin-right: 16px;
        }
      }
    }
  }
}

.igloo-upload-descriptions {
  margin-bottom: 8px;
}

.igloo-upload-preview-list {
  width: 100%;

  .igloo-upload-preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    background: #f9f9f9;
    padding: 16px;
    margin-top: 8px;
    border-radius: @border-radius;

    .igloo-upload-preview-item-info {
      width: calc(~'100%' - 96px);
      display: flex;
      flex: 1;

      .igloo-upload-preview-item-icon {
        margin-right: 16px;
      }

      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(359deg);
        }
      }

      .igloo-upload-uploading {
        animation: rotate 3s linear infinite;
      }

      .igloo-upload-preview-item-text {
        display: inline-flex;
        justify-content: space-between;
        padding-right: 16px;
        max-width: calc(~'100%' - 32px);

        .igloo-upload-preview-item-name {
          display: inline-block;
          margin-right: 16px;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: top;

          & > span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .igloo-upload-preview-item-size {
          color: @hint-color;
        }
      }
    }

    .igloo-upload-preview-item-operation {
      display: flex;
      align-items: center;

      .igloo-upload-preview-item-operation-left-icon {
        margin: 0px 16px;
      }

      .igloo-upload-preview-operation-preview {
        cursor: pointer;
      }

      .igloo-upload-preview-operation-delete {
        cursor: pointer;
        margin-left: 16px;
      }
    }
  }

  .igloo-upload-preview-item-failed {
    border-bottom: 2px solid @error-color;
  }
}

.igloo-upload-preview-modal {
  .igloo-upload-preview-iframe {
    width: 100%;
    overflow: auto;

    .igloo-upload-preview-picture {
      width: 100%;
      border: none;
    }
  }
}

.ant-form-item-has-error .igloo-upload-box {
  border-color: @error-color;
}

.ant-form-item-extra {
  font-style: italic;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  padding-top: 0px;
}

@media screen and (max-width: 768px) {
  .igloo-upload-preview-list .igloo-upload-preview-item {
    padding: 16px 12px;
  }
  .igloo-upload-preview-list
    .igloo-upload-preview-item
    .igloo-upload-preview-item-info
    .igloo-upload-preview-item-text
    .igloo-upload-preview-item-name {
    margin-right: 8px;
  }
  .igloo-upload-preview-list
    .igloo-upload-preview-item
    .igloo-upload-preview-item-operation
    .igloo-upload-preview-item-operation-left-icon {
    margin: 0px 8px 0px 12px;
  }
}