.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: var(--border-radius-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semi-bold);

  &.neutral {
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
  }

  &.brand {
    color: var(--color-text-brand-primary);
    background: var(--color-bg-brand-primary);
  }

  &.info {
    color: var(--color-text-info-primary);
    background: var(--color-bg-info-primary);
  }

  &.success {
    color: var(--color-text-success-primary);
    background: var(--color-bg-success-primary);
  }

  &.warning {
    color: var(--color-text-warning-primary);
    background: var(--color-bg-warning-primary);
  }

  &.danger {
    color: var(--color-text-error-primary);
    background: var(--color-bg-error-primary);
  }

  /* Outlined pill, used where a badge doubles as the label on a control. */
  &.pill {
    gap: var(--spacing-xxs);
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid transparent;
    border-radius: var(--border-radius-full);
    font-weight: var(--weight-medium);
    line-height: var(--line-height-text-xs);

    /* A pill acting as a trigger carries its chevron inside the outline, tighter to the edge
       than the label. */
    &:has(i) {
      padding-right: var(--spacing-sm);
    }

    &.neutral {
      background: var(--color-bg-secondary);
      border-color: var(--color-border-secondary);

      i {
        color: var(--color-fg-quaternary);
      }
    }

    &.warning {
      border-color: var(--color-border-warning_subtle);

      i {
        color: var(--color-fg-warning-secondary);
      }
    }

    &.danger {
      color: var(--color-text-error-primary_hover);
      border-color: var(--color-border-error_subtle);

      i {
        color: var(--color-fg-error-secondary);
      }
    }
  }
}