.fileUpload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 40px;
  background-color: var(--faint-gray);
  width: calc(
    100% - 26px
  ); // 8px on the left + 16px padding on the right + 2px border
  border: 1px solid var(--medium-purple);
  border-radius: 4px;
  padding: 0 8px 0 16px; // We want 8px to the right of the button, and 16px to the left of the icon
  &.error {
    border-color: var(--red);
  }
  &.disabled {
    background-color: var(--faint-gray);
    border-color: var(--light-gray);
    .selectedText,
    .unselectedText {
      color: var(--medium-gray);
    }
  }
}

.chooseFileInputs {
  position: relative;
}

.chooseFileButton {
  /** As per the mockup design, used 30px height */
  height: 30px;
}

.folderUploaderContainer {
  display: flex;
  gap: 8px;
}

.unselectedText {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-12);
  color: var(--purple);
}

.selectedText {
  font-size: var(--font-size-12);
  color: var(--dark-purple);
  display: flex;
  align-items: center;
  gap: 8px;
}

.downloadButton {
  font-size: var(--font-size-10);
}

.errorText {
  font-size: var(--font-size-10);
  color: var(--red);
  margin-top: 8px;
}

.fileRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 50%) 12px;
  align-items: center;
  gap: 16px;
}

.uploadMessage {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  font-size: var(--font-size-12);
  min-width: 0;
}

.uploadFailed {
  @extend .uploadMessage;
  color: var(--dark-red);
  overflow: hidden;
  min-width: 0;
  cursor: default;
}

.uploadComplete {
  @extend .uploadMessage;
  color: var(--dark-green);
}