@import '~scss/variables';
@import '~scss/mixins';

.container {
  height: 148px;
  border-radius: 4px;
  background-color: $white;
  margin-bottom: 12px;
}

.selectContainer {
  height: 148px;
  padding-top: 32px;
  background: #f9fbfd;
  border-radius: 4px;
  border: dashed 1px $light-color06;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;

  .icon {
    width: 40px;
    height: 40px;
    padding: 4px;
    margin-right: 12px;
  }

  .title {
    height: 20px;
    @include TypographyTitleH6;
  }

  .desc {
    height: 20px;
    @include ellipsis;
    @include TypographyParagraph($dark-color01);
  }
}

.uploadContainer {
  display: flex;
  height: 56px;
  padding: 12px;
  border-radius: 4px;
  border: solid 1px $border-color;
  background-color: $white;
  box-sizing: border-box;

  .icon {
    height: 32px;
    width: 32px;
    padding: 4px;
    margin-right: 8px;

    svg {
      width: 24px;
      height: 24px;
    }
  }

  .uploadingContent {
    flex-grow: 1;
    height: 100%;

    .fileInfo {
      height: 20px;

      .fileName {
        height: 20px;
        @include TypographyTitleH6;
      }

      .uploadText {
        margin-right: 5px;
        float: right;
        @include TypographyParagraph($dark-color01);
      }
    }

    .progress {
      height: 8px;
      padding-top: 6px;
      display: block;

      :global(.lego-progress-inner) {
        height: 8px;
        border-radius: 2px;
        background-color: $light-color02;
      }

      :global(.lego-progress-bg) {
        height: 8px;
        border-radius: 2px;
        background-color: $primary;
      }
    }
  }

  .uploadIcon {
    cursor: pointer;
    flex-basis: 32px;
    height: 32px;
    padding: 4px;
    margin-left: 4px;
  }
}

.none {
  display: none;
}
