.pw-pill {
  display: inline-block;
  font-size: var(--pw-text-xs);
  font-weight: var(--pw-weight-medium);
  padding: 0.15rem 0.6rem;
  /* Reserve border width on the base rule so variants applying a colored
     border don't shift layout against borderless siblings. */
  border: 1px solid transparent;
  border-radius: var(--pw-radius-full);
  white-space: nowrap;
  vertical-align: middle;
}

.pw-pill--success {
  background: var(--pw-color-status-success-bg);
  color: var(--pw-color-status-success-fg);
  border-color: var(--pw-color-status-success-fg);
}

.pw-pill--danger {
  background: var(--pw-color-status-error-bg);
  color: var(--pw-color-status-error-fg);
  border-color: var(--pw-color-status-error-fg);
}

.pw-pill--warning {
  background: var(--pw-color-status-warning-bg);
  color: var(--pw-color-status-warning-fg);
  border-color: var(--pw-color-status-warning-fg);
}

.pw-pill--info {
  background: var(--pw-color-status-info-bg);
  color: var(--pw-color-status-info-fg);
  border-color: var(--pw-color-status-info-fg);
}

.pw-pill--muted {
  background: var(--pw-color-surface-sunken);
  color: var(--pw-color-text-muted);
  border-color: var(--pw-color-border);
}