.uploadedItem {
  margin: 0 auto;
  width: 100%;
  max-width: 550px;

  border: 1px solid $gray-200;
  padding: 0.5rem;
  display: grid;
  grid-template-areas:
          "icon     title     close"
          "icon     info      ."
          "progress progress  progress";
  grid-template-columns: auto 1fr auto;
  column-gap: 1rem;
  border-radius: 3px;

  .icon {
    align-self: center;
    grid-area: icon;
    font-size: 2rem;
    color: $gray-700;
  }

  .fileTitle {
    grid-area: title;
    font-size: calc(1rem - 2px);
    color: $ui-black;
  }

  .fileInfo {
    grid-area: info;
    font-size: calc(1rem - 4px);
    color: $gray-1100;
  }

  .fileProgress {
    grid-area: progress;
  }

  .cancelUpload {
    grid-area: close;
    cursor: pointer;
  }

  &.error {
    .icon {
      color: $error-red;
    }
  }
}