.fizz-file-progress {
  border: $border-width-thin solid $color-border-default;
  padding: $spacing-4 $spacing-8;
  border-radius: $border-radius-medium;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.fizz-file-progress button:last-child {
  display: none;
}

.fizz-file-progress[style*="--progress: 100"],
.fizz-file-progress[style*="--progress:100"] {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 10.78 3.22 8l-.947.94L6 12.667l8-8-.94-.94L6 10.78Z' fill='%23009765'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: $icon-size-small $icon-size-small;
  background-position: right 3rem center;
}

.fizz-file-progress[style*="--progress: 100"] button:last-child,
.fizz-file-progress[style*="--progress:100"] button:last-child {
  display: grid;
}
.fizz-file-progress[style*="--progress: 100"] button:first-child,
.fizz-file-progress[style*="--progress:100"] button:first-child {
  display: none;
}

.fizz-file-progress:before {
  --_progress: var(--progress, 0);
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: $color-background-brand-subdued;
  width: calc(var(--_progress) * 1%);
  transition: width;
}

.fizz-file-progress span {
  display: flex;
  align-items: center;
  gap: $spacing-4;
}

.fizz-file-progress span:before {
  content: "";
  display: block;
  width: $icon-size-small;
  height: $icon-size-small;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.3 10.7h5.3V12H5.3v-1.3zm0-2.7h5.3v1.3H5.3V8zm4-6.7H4c-.7 0-1.3.6-1.3 1.3v10.7c0 .7.6 1.3 1.3 1.3h8c.7 0 1.3-.6 1.3-1.3v-8l-4-4zm2.7 12H4V2.7h4.7V6H12v7.3z' fill='%23848484'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: $icon-size-small $icon-size-small;
}