@use 'apps/dashboard/src/variables' as *;

$width-status: rhythm(32);
$gap-upload-row: rhythm(1);

.upload-progress-container {
  width: rhythm(90);
}

.upload-row {
  align-items: center;
  background: $color-neutral-lightest;
  display: flex;
  gap: $gap-upload-row;
  height: rhythm(4);
  justify-content: space-between;
  padding: 0 rhythm(1);
  transition: background $transition-hint;

  &:hover {
    background: $color-neutral-lighter;
  }
}

.file {
  align-items: center;
  display: flex;
  max-width: calc(100% - #{$width-status} - #{$gap-upload-row});
}

.file-name {
  flex: 0 1 auto;
  @include text-truncate();
}

.file-size {
  flex: 0 0 auto;
  padding-left: rhythm(1);
}

.status {
  width: $width-status;
}

.status .error {
  align-items: center;
  display: flex;
  gap: rhythm(1);

  pa-icon {
    color: $color-secondary-strong;
  }
}

.queue-length {
  font-weight: $font-weight-semi-bold;
}

.progress-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
