/* Pill — Figma variety page StatusChip (1862:33301) and Badge (1862:33277). */

.pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: var(--secan-radius-pill);
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  font-weight: var(--secan-fw-bold);
  line-height: var(--secan-lh-small);
  white-space: nowrap;
}

.pill--success {
  background-color: var(--secan-success-bg);
  color: var(--secan-success-text);
}

.pill--warning {
  background-color: var(--secan-warning-bg);
  color: var(--secan-warning-text);
}

.pill--info {
  background-color: var(--secan-info-bg);
  color: var(--secan-info-text);
}

.pill--error {
  background-color: var(--secan-error-bg);
  color: var(--secan-error-text);
}

.pill--neutral {
  background-color: var(--secan-input-bg);
  color: var(--secan-gray);
}

.pill--outline {
  background-color: var(--secan-white);
  border-color: var(--secan-divider);
  color: var(--secan-gray-dark);
  font-weight: var(--secan-fw-regular);
}

.pill--brand {
  background-color: var(--secan-blue);
  color: var(--secan-white);
  font-weight: var(--secan-fw-regular);
}