.activity-section {
  max-height: 500px;
}

.activity-section .activity-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.activity-section .activity-list .activity {
  width: 100%;
  cursor: pointer;
  padding: 0.4rem;
  border-bottom: 1px solid var(--bg-primary-progress);
  margin-bottom: 0.1rem;
}

.activity-section .activity-list .activity.ongoing {
  border-left: 5px solid var(--accent-color);
}

.activity-section .activity-list .activity.waiting {
  border-left: 5px solid var(--activity-waiting-color);
}

.activity-section .activity-list .activity.completed {
  border-left: 5px solid var(--success-color);
}

.activity-section .activity-list .activity.failed,
.activity-section .activity-list .activity.canceled {
  border-left: 5px solid var(--error-color);
}

.activity-section .activity-list .activity:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.activity-section .activity-list .activity .upper-section,
.activity-section .activity-list .activity .lower-section {
  gap: 0.5rem;
}

.activity-section .activity-list .activity .progress-bar {
  width: 100%;
  max-width: 20rem;
}

.activity-section .activity-list .activity .progress-bar .completed-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 0.8rem;
  line-height: inherit;
}

.activity-section .activity-list .activity .progress-bar .bar {
  width: 70%;
  height: 1rem;
  background-color: var(--accent-color);
  border-radius: 0.5rem;
}

.activity-section .cancel-button:hover {
  background-color: var(--accent-background-secondary);
}

.progress.success-progress::-webkit-progress-value,
.progress.success-progress::-moz-progress-bar,
.progress.success-progress::-ms-fill {
  background-color: var(--success-color);
}

.progress::-webkit-progress-bar {
  background-color: var(--bg-primary-progress);
}

.activity-section .activity-list .activity .progress-bar .progress:indeterminate {
  background-color: var(--bg-primary-progress);
  background-image: linear-gradient(to right,
      var(--accent-color) 30%,
      var(--bg-primary-progress) 30%);
}