@import (reference) url('../Icon.less');

.BulkUpload-file {
  color: var(--color-gray5);

  &::after {
    &:extend(.Icon all);

    content: 'description';
    font-size: 70px;
  }
}

.BulkUpload-fileName {
  --Text-height: var(--lineHeight-s);

  color: var(--color-gray5);
  font-size: var(--fontSize-s);
  line-height: var(--lineHeight-s);
}

.BulkUpload-filePreview {
  overflow: hidden;
  padding: 0 var(--gap-s) 0 var(--gap-s);
  text-align: center;
  text-overflow: ellipsis;
  width: 150px;
}

.BulkUpload-header {
  visibility: visible;
}

.BulkUpload-loader {
  background-color: var(--color-gray2);
  display: none;
  padding: var(--gap-m);
}

.BulkUpload-form {
  .loaded & {
    display: block;
  }

  .loading & {
    display: none;
  }
}

.BulkUpload-loader {
  .loading & {
    display: block;
    visibility: visible;

    &::before {
      .Icon;

      animation: spin var(--time-xl) infinite ease-in-out;
      color: var(--color-black);
      content: 'autorenew';
      margin-right: var(--gap-m);
      z-index: 10;
    }
  }
}
