.status-bar {
  display: flex;
  gap: var(--inline-space);
  margin-bottom: var(--block-space);
}

.status-bar__item {
  display: flex;
  align-items: center;
  gap: var(--inline-space-half);
  padding: var(--block-space-half) var(--inline-space);
  border-radius: 4px;
  background: var(--color-status-pending-soft);
  color: var(--color-status-pending);
}

.status-bar__item--success {
  background: var(--color-status-success-soft);
  color: var(--color-status-success);
}

.status-bar__item--pending {
  background: var(--color-status-pending-soft);
  color: var(--color-status-pending);
}

.status-bar__label {
  font-weight: 500;
}

.status-bar__value {
  font-size: var(--text-small);
}