.o360-sync-receipt-slot {
  min-width: 0;
  min-height: 18px;
  display: flex;
  align-items: center;
}

.o360-sync-receipt {
  --o360-sync-muted: var(--muted-2, var(--field-muted-2, #70798e));
  --o360-sync-pending: #f2c474;
  --o360-sync-sending: var(--violet-bright, var(--field-violet-bright, #a693ff));
  --o360-sync-synced: #70dda5;
  --o360-sync-blocked: #ff98a4;

  min-width: 0;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--o360-sync-muted);
  font-size: .6875rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}

.o360-sync-receipt[data-state="pending"] { color: var(--o360-sync-pending); }
.o360-sync-receipt[data-state="sending"] { color: var(--o360-sync-sending); }
.o360-sync-receipt[data-state="synced"] { color: var(--o360-sync-synced); }
.o360-sync-receipt[data-state="blocked"] { color: var(--o360-sync-blocked); }

.o360-sync-receipt__spinner {
  width: 12px;
  height: 12px;
  display: inline-block;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: o360-sync-receipt-spin .85s linear infinite;
}

.o360-sync-receipt__checks {
  position: relative;
  width: 18px;
  height: 14px;
  display: inline-block;
  flex: 0 0 auto;
}

.o360-sync-receipt__checks svg {
  position: absolute;
  top: 1px;
  width: 13px;
  height: 13px;
  display: block;
  fill: currentColor;
  stroke: none;
}

.o360-sync-receipt__checks svg:first-child { left: 0; }
.o360-sync-receipt__checks svg:last-child { left: 5px; }

.o360-sync-receipt__problem {
  width: 13px;
  height: 13px;
  display: block;
  flex: 0 0 auto;
  fill: currentColor;
  stroke: none;
}

.o360-sync-receipt__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.o360-sync-receipt[data-state="synced"] .o360-sync-receipt__label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@keyframes o360-sync-receipt-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .o360-sync-receipt__spinner { animation: none !important; }
}

@media (forced-colors: active) {
  .o360-sync-receipt { color: CanvasText; }
}