/* Pill base (match the sizes in your reference) */
.su-page .su-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid transparent;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}

.su-page .su-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

/* Colours from your screenshots */
.su-page .su-pill--error {
  color: #9f1239;
  background: #fdecec;
  border-color: #f5b5c0;
}
.su-page .su-pill--error .su-pill__dot {
  background: #9f1239;
}

.su-page .su-pill--active {
  color: #344054;
  background: #ffffff;
  border-color: #d0d5dd;
}
.su-page .su-pill--active .su-pill__dot {
  background: #12b76a;
}

.su-page .su-pill--warning {
  color: #8b5e00;
  background: #fff6e6;
  border-color: #fad7a1;
}
.su-page .su-pill--warning .su-pill__dot {
  background: #8b5e00;
}

.su-page .su-pill--default {
  color: #374151;
  background: #f3f4f6;
  border-color: #e5e7eb;
}
.su-page .su-pill--default .su-pill__dot {
  background: #374151;
}

.su-page .su-pill--info {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bbd5ff;
}
.su-page .su-pill--info .su-pill__dot {
  background: #1d4ed8;
}