/* ============================================================
   Chip component — Qiscus DS 2026 (label chips used by portal)
   ============================================================ */

.ds-chip {
  --chip-pad-y: var(--space-3xs);
  --chip-pad-x: var(--space-2xs);
  --chip-font-size: 12px;
  --chip-font-lh: 18px;
  --chip-gap: var(--space-3xs);
  --chip-dot-size: 6px;
  --chip-icon-size: 12px;

  display: inline-flex;
  align-items: center;
  gap: var(--chip-gap);
  padding: var(--chip-pad-y) var(--chip-pad-x);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--chip-font-size);
  line-height: var(--chip-font-lh);
  white-space: nowrap;
  user-select: none;
}

.ds-chip--md {
  padding: var(--space-3xs) var(--space-xs);
  font-size: 14px;
  line-height: 20px;
  gap: var(--space-2xs);
}
.ds-chip--md .ds-chip__dot { width: 8px; height: 8px; }

.ds-chip__dot {
  display: inline-block;
  width: var(--chip-dot-size);
  height: var(--chip-dot-size);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* ===== TYPE: chip/label (semantic status) ===== */
.ds-chip--label {
  border: 0;
  font-weight: var(--fw-regular);
  border-radius: var(--radius-sm);
}
.ds-chip--success  { background: var(--bg-success-primary); color: var(--text-success-primary); }
.ds-chip--danger   { background: var(--bg-error-primary);   color: var(--text-error-primary); }
.ds-chip--warning  { background: var(--bg-warning-primary); color: var(--text-warning-primary); }
.ds-chip--progress { background: var(--bg-info-primary);    color: var(--text-info-primary); }
.ds-chip--neutral  { background: var(--bg-tertiary);        color: var(--text-secondary); }

.ds-chip--success  .ds-chip__dot { background: var(--indicator-success); }
.ds-chip--danger   .ds-chip__dot { background: var(--indicator-error); }
.ds-chip--warning  .ds-chip__dot { background: var(--indicator-warning); }
.ds-chip--progress .ds-chip__dot { background: var(--indicator-info); }
.ds-chip--neutral  .ds-chip__dot { background: var(--indicator-neutral); }