.rp-badge {
  border-radius: var(--rp-radius-small);
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  height: 1.5rem;
  padding: .5rem;
  font-size: .75rem;
  font-weight: 500;
  transition: color .25s;
  display: inline-flex;
}

.rp-badge--tip {
  color: var(--rp-container-tip-text);
  background-color: var(--rp-container-tip-bg);
}

.rp-badge--info {
  color: var(--rp-container-info-text);
  background-color: var(--rp-container-info-bg);
}

.rp-badge--warning {
  color: var(--rp-container-warning-text);
  background-color: var(--rp-container-warning-bg);
}

.rp-badge--danger {
  color: var(--rp-container-danger-text);
  background-color: var(--rp-container-danger-bg);
}

.rp-badge--outline {
  border: 1px solid;
}

.rp-badge--outline.rp-badge--tip {
  border-color: var(--rp-container-tip-border);
}

.rp-badge--outline.rp-badge--info {
  border-color: var(--rp-container-info-border);
}

.rp-badge--outline.rp-badge--warning {
  border-color: var(--rp-container-warning-border);
}

.rp-badge--outline.rp-badge--danger {
  border-color: var(--rp-container-danger-border);
}