.flow__card-head {
  justify-content: space-between;
}

.flow__card-vendor {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.flow__sync-badge {
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #f4f4f6;
  color: #5c5c5e;
  border-radius: 999px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding-block: 3px;
  padding-left: 3px;
  padding-right: 8px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  flex-direction: row;
  flex-wrap: nowrap;
  display: inline-flex;
  transition: background-color 0.24s ease-in-out, color 0.24s ease-in-out;
}

.flow__sync-badge.is-syncing {
  background: #fff6df;
  color: #c49754;
}

.flow__sync-badge.is-synced {
  background: #c7ebda;
  color: #2b9a66;
  padding-left: 8px;
  padding-right: 8px;
}

.flow__sync-badge .flow__sync-badge-icon {
  object-fit: contain;
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  flex-shrink: 0;
  display: block;
  margin: 0;
}

.flow__sync-badge .flow__sync-badge-label {
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.flow__sync-badge .flow__sync-loader {
  width: 12px;
  height: 12px;
  border: 1.5px solid #ead9b8;
  border-top-color: #c49754;
  border-right-color: color-mix(in srgb, #c49754 45%, #ead9b8);
  opacity: 0.9;
  border-radius: 50%;
  animation: heroFlowLoaderSpin 1.5s linear infinite;
  flex-shrink: 0;
  display: block;
}

.flow__sync-badge .flow__sync-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

.flow__icons .flow__icon-xero {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
}

@keyframes heroFlowLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}