.sivar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid rgb(var(--sivar-line));
  border-radius: var(--r-pill, 9999px);
  padding: 5px 11px;
  background: rgb(var(--sivar-surface, 248 249 250));
  color: rgb(var(--sivar-ink, 17 17 17));
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

button.sivar-chip {
  cursor: pointer;
}

button.sivar-chip:disabled {
  cursor: default;
  opacity: 0.55;
}

.sivar-chip--inverse {
  border-color: rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.08);
  color: rgb(var(--sivar-ink, 250 248 244));
}

.sivar-chip--info {
  border-color: rgb(var(--sivar-blue, 36 112 196) / 0.28);
  background: rgb(var(--sivar-blue, 36 112 196) / 0.14);
  color: rgb(var(--sivar-blue, 36 112 196));
}

.sivar-chip--success {
  border-color: rgb(var(--sivar-green, 43 166 74) / 0.28);
  background: rgb(var(--sivar-green, 43 166 74) / 0.14);
  color: rgb(var(--sivar-green, 43 166 74));
}

.sivar-chip--warning {
  border-color: rgb(var(--sivar-mustard, 200 154 46) / 0.28);
  background: rgb(var(--sivar-mustard, 200 154 46) / 0.14);
  color: rgb(var(--sivar-mustard, 200 154 46));
}

.sivar-chip--danger {
  border-color: rgb(var(--sivar-red, 200 48 47) / 0.28);
  background: rgb(var(--sivar-red, 200 48 47) / 0.14);
  color: rgb(var(--sivar-red, 200 48 47));
}