.nano-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  padding: var(--space-1) var(--space-2-5);
  white-space: nowrap;

  &.nano-badge--primary {
    background-color: hsl(var(--color-primary));
    color: hsl(var(--color-primary-foreground));
  }

  &.nano-badge--secondary {
    background-color: hsl(var(--color-secondary));
    color: hsl(var(--color-secondary-foreground));
  }

  &.nano-badge--destructive {
    background-color: hsl(var(--color-destructive));
    color: hsl(var(--color-destructive-foreground));
  }

  &.nano-badge--outline {
    background-color: transparent;
    border: 1px solid hsl(var(--color-border));
    color: hsl(var(--color-foreground));
  }

  &.nano-badge--success {
    background-color: hsl(var(--color-success));
    color: hsl(var(--color-success-foreground));
  }

  &.nano-badge--warning {
    background-color: hsl(var(--color-warning));
    color: hsl(var(--color-warning-foreground));
  }

  svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
  }
}